Проблемы переполнения CSS - PullRequest
Новая
       5

Проблемы переполнения CSS

3 голосов
/ 22 июля 2010

Блин, я всегда чувствую себя разочарованным с CSS. Я продолжаю читать книги и статьи / учебники, но CSS - это ПИТА!

У меня есть следующий код: 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing CSS</title>
<style type="text/css">
<!--
body {
    background: #dddddd;
    font: 12px "Trebuchet MS", Helvetica, sans-serif;
    color: #000;
}
.box {
    background: #FFF;
    width: 500px;
    border: 1px solid #999999;
    -moz-border-radius: 5px;
}
.box .content {
    background: #FFF;
    padding: 15px;
    -moz-border-radius: 5px;
}
.message {
    border: 1px solid #bbbbbb;
    padding: 10px;
    margin: 0px 0px 15px;
    background-color: #DDDDDD;
    color: #333333;
    -moz-border-radius: 5px;
}
.message.info {
    border-color: #9FD1F5;
    background-color: #C3E6FF;
    color: #005898;
}
._50\% {
    display: inline;
    float: left;
    margin: 0 2%;
    overflow: hidden;
    position: relative;
    width: 46%;
}
-->
</style>
</head>

<body>
    <div class="box">
        <div class="content">
            <div class="message info">Info message.</div>
            <div class="message _50%">Simple message.</div>
            <div class="message _50%">Simple message.</div>
        </div>
    </div>
</body>
</html>

Но, что бы я ни делал, я не могу отобразить два «Простых сообщения» рядом с «Информационным сообщением», я уже пытался поиграть с display, overflow и т. Д. .. Кажется, ничего не работает.

Переполнение CSS http://a.imagehost.org/0658/Testing-CSS_1279773508176.png

Чего мне не хватает?

Ответы [ 5 ]

12 голосов
/ 22 июля 2010

Ваша математика не совсем верна.

Давайте начнем с глазных яблок ...

Коробки Simple Message имеют ширину: 

2% + 46% + 2% + (1 px BORDER on each side) + (10px PADDING on each side)

Это больше, чем на 50%!

Блочная модель CSS говорит, что ширина отступов, границы и поля добавляются за пределы ширины, определенной CSS.элемент (теоретически, на практике старые версии IE не следуют этому правилу , более новые версии делают).

Таким образом, определения border и padding для .messageоткармливайте свои Simple Message ящики.

Если вы уменьшите ширину ваших Simple Message ящиков до 41%, они окажутся в одном ряду.

Давайте рассмотрим особенности, чтобы понять, почему....

Разбивка

ОК, вот ваши коробки: 

class box
    500px wide with a 1px border all around
        Pixels left to play with ==> 500

class content
    15px padding on the OUTSIDE of .content on all side. 
    content is INSIDE .box, the maximum width of .content is 500px
    but the padding is taking up some of this space (15*2 = 30px)
        Pixels left to play with ==> 470

class message info
    The maximum width of anything inside .content is 470px
    There are two _50% boxes, so each can have a max total width
      (including all the padding, border, margin) of 470/2 = 235px
    Width of 
        + 46% of 470px = 216.2          = 216px 
        + 2*10px padding                =  20px
        + 2*1px border                  =   2px
        + 2*(2% of 470px) = 2*9.4 = 2*9 =  18px
        ---------------------------------------
                                          256px! ==> 2*256 > 470

Теперь, почему ширина 41% работает? 

class box
        Pixels left to play with ==> 500

class content
        Pixels left to play with ==> 470

class message info
    Width of
        + 41% of 470px = 192.7          = 193px
        + 2*10px padding                =  20px
        + 2*1px border                  =   2px
        + 2*(2% of 470px) = 2*9.4 = 2*9 =  18px
        ---------------------------------------
                                          233px ==> 2*233 < 470

Наконец-то 42% не работает, потому что 

42% of 470 = 197.4 = 197.
197 + 20 + 2 + 18 = 237
237 * 2 = 474........ and 474 > 470

В общем

Предлагаю взглянуть на вещииспользуя Firebug .Убедитесь, что вы переключаетесь между вкладкой Layout, которая показывает вам модель блока, и вкладкой Style, где вы можете временно протестировать изменение вашего CSS!

Для решения проблемы сворачивающейся коробки я предлагаю: 

.box .content {
      /* This lets .content expand in height with the floating divs inside it */
    overflow: auto;
}
1 голос
/ 22 июля 2010

Я не уверен, насколько допустимы (или широко поддерживаются) классы CSS, использующие символ %.

Вы также можете обнаружить, что ваша ширина не учитывает границу (разные блочные модели в разных браузерах).

1 голос
/ 22 июля 2010

Прежде всего, попробуйте поместить overflow: hidden в ваш элемент .content.Установка переполнения для дочерних элементов не принесет много пользы, чтобы предотвратить их переполнение.Установив overflow: hidden для содержащего элемента, вы (в большинстве браузеров) заставите его расширяться, чтобы содержать его дочерние элементы.

0 голосов
/ 22 июля 2010

Из-за полей в классе ._50 я бы изменил ширину на более низкое значение, например.41%.Я также удалил бы относительные позиции и директивы inlne. 

._50\% {
    float: left;
    margin: 0 2%;
    width: 41%;
}

Добавьте новый класс .clear и добавьте новый div с этим классом очистки ниже сообщений, чтобы внешний div мог расширяться. 

.clear
{
   clear: both;
}

, v 

<body>
        <div class="box">
            <div class="content">
                <div class="message info">Info message.</div>
                <div class="message _50%">Simple message.</div>
                <div class="message _50%">Simple message.</div>
              <div class="clear"></div>
            </div>
        </div>
    </body>
    </html>

Вот и все.Поплавки - отличный инструмент, но вы должны понимать, как они работают.

0 голосов
/ 22 июля 2010

попробуйте просто уменьшить ширину _50%, кажется, что общее с двумя _50% больше, чем с content, и вместо использования% width, попробуйте использовать px

этот css работает для меня 

._50\% {
    display: inline;
    float: left;
    margin: 0 2%;
    overflow: hidden;
    position: relative;
    width: 90px;
}

, если вы хотите сделать отображение div рядом друг с другом на display: inline или float, вам нужно вычислить ширину контейнера и ширинуDiv внутри контейнера.Особенно, если у вас есть margin и padding, поскольку они будут занимать пробелы.

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

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

...