Как установить DIV с динамической шириной

StackOverflow https://stackoverflow.com/questions/933494

  •  06-09-2019
  •  | 
  •  

Вопрос

Вот мой сценарий.У меня есть контейнер div, внутри которого есть (n) дочерние элементы.Для этого примера предположим, что внутри контейнера есть 2 div:

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

Контейнерный div будет составлять процент от области просмотра, скажем, 80%.Теперь я хочу, чтобы эти два внутренних элемента div (col1 и col2) были встроенными друг в друга и занимали одинаковое количество места.Таким образом, результат должен выглядеть примерно так:

+-------------- container -------------+
|  +---- col1 ----+  +---- col2 ----+  |
|  | stuff in     |  | stuff in     |  |
|  | col1         |  | col2         |  |
|  +--------------+  +--------------+  |
+--------------------------------------+

Или, если ширина контейнера изменится, это должно привести к чему-то вроде этого:

+------------------------------ container -----------------------------+
|  +------------ col1 ------------+  +------------ col2 ------------+  |
|  | stuff in col1                |  | stuff in col2                |  |
|  | stuff in col1                |  | stuff in col2                |  |
|  +------------------------------+  +------------------------------+  |
+----------------------------------------------------------------------+

Внутренние элементы div всегда имеют одинаковую ширину и немного отделены друг от друга.Это похоже на макет таблицы, но я бы предпочел не использовать таблицы, если это возможно.Я пробовал различные методы, такие как плавание и отображение встроенных элементов div, но безрезультатно.Кажется, что они никогда не могут выровняться правильно.

Это было полезно?

Решение

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

#col1, #col2 {
    float: left;
    width: 50%;
}

Другие советы

сделайте интервалы col1 и col2 (не div) с помощью 

vertical-align:top
display:inline-block
width:50%

очевидно (отрегулируйте ширину, чтобы учесть ваши поля/отступы.и рекомендовал использовать проценты для полей/отступов, чтобы в сумме они составляли чуть менее 100%, см.:http://ejohn.org/blog/sub-pixel-problems-in-css/)

Мое предпочтительное решение

Используйте позиционирование относительно внешнего контейнера:

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

Обратите внимание, что вы оставляете примерно те же 2% посередине.А #col1 и #col2 теперь должно быть выровнено.

Другие решения

С CSS3:использовать column-count: 2 и разбить столбец после первого div.

Если вам действительно хочется плыть, делайте только #col1 { float: left; width: 50%; }

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

Возможно, использование display: table; помог бы? http://jsfiddle.net/g4dGz/119/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top