奇怪的三个div并排在一起
奇怪的三个div并排在一起
提问于 2013-05-03 23:36:55
我是一个表格爱好者，但我需要拖放一些div，所以我尝试了不使用表格(正确的方式)。
这就是我想要做的：
所有元素之间的间距应为24px。我的主要问题是让div (1,2,3)占用100%的可用空间。宽度: 100%将它们发送到主容器之外。
这是我到目前为止的代码：
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>和我的css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}如您所见，我尝试了表格单元格方法，但在尝试float: left方法之前。
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-04 19:02:25
使用表格来分隔div怎么样？这样，在td填充的情况下，它们之间将始终有24px。
看看这把小提琴：
http://jsfiddle.net/5zfEq/
添加：
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}基于@ fiddle ...谢谢;)
Stack Overflow用户
发布于 2013-05-04 00:03:38
Fiddle
您不能将px值与%值和动态大小一起正确使用。您应该使用x%而不是24px。你可以在"cells“上使用float: left。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16362652
复制相关文章
相似问题
腾讯云开发者
