CSS, отображение встроенного и три деления - PullRequest
Новая
       18

CSS, отображение встроенного и три деления

5 голосов
/ 24 апреля 2009

У меня есть этот HTML-код: 

<body>
    <div id="div0" style="display:inline; background-color:green; width:100%">
        <div id="div1" style="display:inline; background-color:aqua;width:33%">&nbsp;</div>
        <div id="div2" style="display:inline; background-color:red;width:33%">&nbsp;</div>
        <div id="div3" style="display:inline; background-color:yellow;width:33%">&nbsp;</div>
    </div>
</body>

Я хочу заполнить страницу div1 , div2 и div3 , но они не заполняют всю ширину.

Что это происходит?

Ответы [ 7 ]

14 голосов
/ 24 апреля 2009

Взято из декларации дисплея :

display: inline означает, что элемент отображается внутри, внутри текущий блок в той же строке. Только когда это между двумя блоками делает элемент образует «анонимный блок», что, однако, имеет наименьшее возможное ширина.

Нельзя указывать для встроенного элемента заданную ширину или высоту, они будут игнорироваться. Элемент должен иметь тип отображения block, чтобы сделать это. Однако установка display: block не даст желаемого результата, поскольку каждый элемент будет заполнять всю ширину. float: left заставит их складываться влево, а также заставит display: block. 

<head>
<style type="text/css">
#wrap {
    width:100%;
}
#wrap:after {
    /* Prevent wrapper from shrinking height, 
    see http://www.positioniseverything.net/easyclearing.html */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#wrap .container {
    float: left;
    width:33%;
}
</style>
</head>
<body>
    <div id="wrap">
        <div class="container"> </div>
        <div class="container"> </div>
        <div class="container"> </div>
    </div>
</body>

Ммммм, семантика

См. Ответ от Phunky для дальнейших комментариев о плавающем.

4 голосов
/ 24 апреля 2009

Используйте относительное расположение на внешнем <div> и плавайте на внутреннем <div> с. Не используйте display: inline. 

<body>
  <div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
    <div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
    <div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
    <div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
  </div>
</body>
3 голосов
/ 26 апреля 2009

Рори Фитцпатрик более или менее имеет идеальный ответ для вас, хотя нет необходимости устанавливать pos: rel для #wrapper, поскольку он уже является относительным блочным элементом и по умолчанию будет охватывать всю ширину.

Когда вы перемещаете блочный элемент, он имитирует функциональность выравнивания display: inline, и в идеальном мире у нас будет доступ к очень полезному display: inline-block, который сделал бы именно то, что вы ожидали. 1003 *

Но при плавающих элементах следует помнить одну вещь: они будут занимать только необходимое им пространство (включая отступы и отступы), если вы не установите фиксированную ширину.

Вот почему Рори использовал ширину: 33%; так как это лучшее, что ты когда-либо получишь :)

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

3 голосов
/ 24 апреля 2009

display:inline сжимает содержимое. Возможно, вы захотите попробовать float:left.

1 голос
/ 24 апреля 2009 
<body>
    <div id="div0" style="float: left; background-color:green; width:100%">
        <div id="div1" style="float: left; background-color:aqua;width:33%">&nbsp;</div>
        <div id="div2" style="float: left; background-color:red;width:33%">&nbsp;</div>
        <div id="div3" style="float: left; background-color:yellow;width:33%">&nbsp;</div>
    </div>
</body>

Это должно сработать для вас. И причина, по которой IIRC заключается в том, что дисплей: встроенный не принимает% ширины.

0 голосов
/ 07 марта 2017

Лучший способ сделать это, вопреки всем ответам, данным ранее, можно найти, обратившись к ответу на этот вопрос:

3 встроенных блока с шириной ровно 33% не помещаются в родительский элемент

Самый быстрый и простой способ - не самый красивый, чтобы смотреть на него (поместите ваши делители в одну строку, чтобы удалить автоматически предоставленный один пробел, как обычно), но он будет работать очень хорошо для того, что вы хотите. Ответ, на который я ссылаюсь, перечисляет множество других способов, которые, на мой взгляд, лучше, чем любой предоставленный ранее, и решают истинную проблему, с которой вы столкнулись.

Вот код, работающий в точности так, как вы хотите, и ссылка на скрипку! 

<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
    <div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%">&nbsp;</div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%">&nbsp;</div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%">&nbsp;</div> 
</div>

https://jsfiddle.net/stopitdan/uz1zLvhx/

0 голосов
/ 03 января 2014

Вместо использования float вы можете использовать flexbox для более гибкого изменения размера. Также это заставляет элементы оставаться в ряду.

Пример: 

<head>
    <style type="text/css">
    #wrap {
        width:100%;
        display:inline-flex;
    }
    #wrap:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        display: inline-flex;
        flex-direction: row;    
    }
    .container1 {
        width:20%;
    }
    .container2{
        width:80%;
    }
    </style>
</head>
<body>
<div id="wrap">
    <div class="container1"> </div>
    <div class="container2"> </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...