如何设置动态宽度DIV

Here is my scenario. I have a container div that has (n) child elements inside it. For this instance lets say there are 2 divs within the container div:

这是我的情景。我有一个容器div,里面有(n)个子元素。对于这个例子,我们可以说容器div中有2个div:

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

The container div is going to be a percentage of the viewport, say 80%. Now, what I'm looking for is for these two inner divs (col1 & col2) to be inline with each other and take up the same amount of space. So the result should look something like this:

容器div将占视口的百分比,比如说80%。现在,我正在寻找的是这两个内部div(col1和col2)相互串联并占用相同的空间。所以结果应该是这样的:

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

Or if the container width is changed should result in something like this:

或者如果更改容器宽度应该导致如下所示:

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

The inner divs are always of equal width and have some separation from each other. This is similar to a table layout, but I would rather not use tables if possible. I have tried various techniques like floating and displaying the divs inline to no avail. They can never seem to align just right.

内部div总是具有相等的宽度并且彼此具有一些分离。这类似于表格布局,但我宁愿不使用表格。我尝试了各种技术,如浮动和显示div内联无济于事。他们似乎永远不会恰到好处地对齐。

5 个解决方案

#1

Table cells could stretch automatically. It's not exactly possible with div, so you have to specify appropriate width for each column by hand. For example:

表格细胞可以自动拉伸。使用div并不完全可能,因此您必须手动为每列指定适当的宽度。例如:

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

#2

make col1 and col2 spans (not divs) with

make col1和col2 spans(不是div)

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

obviously (adjust the width to account for your margins/padding. and recommended that you use percentages for margins/padding so they add up to just under 100% see:http://ejohn.org/blog/sub-pixel-problems-in-css/)

很明显(调整宽度来考虑边距/填充。并建议你使用百分比来填充边距/填充,因此它们加起来不到100%见:http://ejohn.org/blog/sub-pixel-problems-在-CSS /)

#3

My preferred solution

Use positioning relative to the outer container:

使用相对于外部容器的定位:

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

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

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

Note that you leave approximately the same 2% in the middle. The #col1 and #col2 should be aligned now.

请注意,您在中间留下大约相同的2%。 #col1和#col2现在应该对齐。

Other solutions

With CSS3: use column-count: 2 and break column after first div.

使用CSS3:使用column-count:2并在第一个div之后中断列。

If you really feel like floating, do only #col1 { float: left; width: 50%; }

如果你真的想浮动,只做#col1 {float:left;宽度:50%; }

#4

#container{
overflow: hidden
} 

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

#5

Maybe the use of display: table; would help? http://jsfiddle.net/g4dGz/119/

也许使用display:table;有助于? http://jsfiddle.net/g4dGz/119/