Css Container Div Размер

У меня проблема с изменением размера DIV, чтобы он соответствовал содержанию, когда он заставляет его дочерние divs перемещаться вниз.Css Container Div Размер

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

HTML

<div id="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div>

CSS

body { 
    text-align: center; 
} 
#container { 
    text-align: left; 
    border: 1px solid red; 
    display: inline-block; 
    padding:0; 
    margin:0; 
    /* for ie6/7: */ 
    *display: inline; 
} 
.box{ 
    width: 100px; 
    height: 100px; 
    border: 1px solid blue; 
    display:inline-block; 
}

Когда вы смотрите на примере контейнер расширяется до 100%, оставляя пространство между правым большинством детей и контейнером. Div Issue Example http://jsfiddle.net/rjY7F/594/

источник

2015-02-03 Superdumbell

Вы можете добавить либо максимальную ширину или ширину:% к контейнеру , – chrisbedoya

Проблема с этим - мне нужно, чтобы div мог отвечать на размер страницы. – Superdumbell

Возможный дубликат [Центральная сетка элементов встроенного блока в div, но последняя строка выровнена с левым краем сетки) (http://stackoverflow.com/questions/19527104/center-grid-of-inline-block-elements -in-div-but-last-row-is-aligned-with-left-e) – Superdumbell

#container {display:table;} 
.box {display:table-cell; float:none; vertical-align:top;}

Затем установите ширину стиля .box к чему-то вроде 100px, и установить ширину #container комбинированной ширину.

источник

2015-02-03 16:47:34

Это почти работает. Поплавок: ни один не заставляет все оставаться в одной строке, а не перемещаться вниз в следующую строку. Удаление плавающего элемента не приводит к тому, что он имеет ту же проблему, что и раньше. – Superdumbell

Что еще нужно? –

Мне нужно, чтобы элементы могли перемещаться в следующую строку различных мониторов. Когда когда-либо больше элементов в первой строке, которая будет соответствовать, и она обертывает элементы вниз, она оставляет пустое пространство между правой стороной верхней строки и div. – Superdumbell

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

вот код:

#container { 
text-align: left; 
border: 1px solid red; 
display: table; 
padding:0; 
margin:0; 
width:100%; 
} 
.box { 
display:table-cell; 
height:100px; 
border:1px solid blue; 
}

http://jsfiddle.net/rjY7F/603/

источник

2015-02-03 17:00:26

Flexbox может быть полезным в этом сценарии

Чтобы сделать среду Flexbox вы должны начать с установки родительского элемента (в вашем случае container) на display:flex ,

Для Flex-элементы, которые вы можете просто установить min-width но я предлагаю вам также взглянуть на все удивительные особенности Flexbox предлагает ...

источник

2015-02-03 17:09:47 maioman

Css Container Div Размер

ответ

Смежные вопросы