如何设置动态宽度DIVs
如何设置动态宽度DIVs
提问于 2009-06-01 03:48:09
这是我的场景。我有一个容器div，里面有(n)个子元素。在这个例子中，假设容器div中有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，但都没有效果。它们似乎永远不会对齐。
回答 5
Stack Overflow用户
回答已采纳
发布于 2009-06-01 04:12:37
表单元格可以自动伸展。使用div不可能做到这一点，因此您必须手动为每一列指定适当的宽度。例如：
#col1, #col2 {
float: left;
width: 50%;
}Stack Overflow用户
发布于 2009-06-01 03:55:03
使用创建col1和col2跨度(而不是div)
vertical-align:top
display:inline-block
width:50%显然(调整宽度以适应您的边距/填充。并建议您使用百分比作为页边距/填充，以便它们加起来略低于100%参见：http://ejohn.org/blog/sub-pixel-problems-in-css/)
Stack Overflow用户
发布于 2009-06-01 23:43:40
我首选的解决方案
使用相对于外部容器的定位：
#container, #container > div
{
position: relative;
}
#col1
{
left: 2%; /* your margin */
}
#col2
{
right: 2%;
}
#container > div
{
width: 47%;
}请注意，您在中间保留了大致相同的2%。#col1和#col2现在应该对齐了。
其他解决方案
使用CSS3:在第一个div之后使用column-count: 2和break列。
如果你真的想漂浮，只做#col1 { float: left; width: 50%; }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/933494
复制相关文章
相似问题
腾讯云开发者
