Как вы работаете с процентными и пиксельными размерами в одном элементе в CSS? - PullRequest
Новая
       8

Как вы работаете с процентными и пиксельными размерами в одном элементе в CSS?

3 голосов
/ 21 июня 2009

В частности, я имею в виду ситуацию, когда вам нужно иметь общую ширину, скажем, 100% для DIV, но с отступом в 10 пикселей и границей в 1 пиксель.(И не полагайтесь на то, что браузер автоматически установит его на эту ширину - скажем, он плавает, например, влево.)

Есть ли простой способ сделать это без использования JavaScript?

Ответы [ 4 ]

2 голосов
/ 21 июня 2009

Если вы используете box-sizing: border-box, вы можете установить width: 100%; border: 1px solid black; padding: 10px;, и сумма ширины, границы, поля и отступов будет той, что указана для ширины. Источник

EDIT: правда, поддержка браузера немного ограничена. FF 3.5 и Safari 4 поддерживают его, не уверен насчет IE8 или Chrome.

2 голосов
/ 21 июня 2009

Нет, нет способа установить это на один элемент, который работает с в настоящее время основными браузерами.

Вы можете использовать 2 вложенных div с. Установите ширину 100% на внешней поверхности div и установите отступ и границу на внутренней стороне div.

0 голосов
/ 21 июня 2009

А как насчет следующего решения? 

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Content with Menu</title>         
    <style type="text/css">
      .content .outer{
        width:100%;
        border:1px solid black;
        background-color:green;
      }
      .content .inner{
        margin-left:10px;
        margin-right:10px;
        background-color:red;
      }
    </style>          
    </head>
    <body>    
    <div class="content">
      <div class="outer">
        <div class="inner">  
          <p>Hi!</p>
        </div>
      </div>
    </div>
    </body>
</html>

Обновление ОК, не выполняйте то, о чем вы говорите, только одним элементом.

0 голосов
/ 21 июня 2009

Это возможно только с CSS 3.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...