我正在疯狂地试图获得以下布局:
HTML
<div class="container">
<div class="all left">
Left1
</div>
<div class="all left">
Left2
</div>
<div class="all center">
Center
</div>
<div class="all right">
Right1
</div>
<div class="all right">
Right2
</div>
</div>
CSS
.container {
display: table;
position: relative;
width: 100%;
height: 100px;
border-spacing: 5px;
}
.all {
display: table-cell;
border: 1px solid #333;
margin: 5px;
}
.left {
width: 45px;
}
.right {
width: 45px;
}
.center {
width: auto;
}
FIDDLE
http://jsfiddle.net/ozrentk/VdryG/3/
然而,无论我尝试什么(例如将border-spacing: 0px
放在左边或右边div,margin: 0
,边框折叠),我的所有边距都会相同。
为了简化它,我想要这个:
+--------------------------------------------------------------+
|+-----++-----+ +------------------------------++-----++-----+|
|| || | | || || ||
|| || | | || || ||
|| || | | || || ||
|| || | | || || ||
|| || | | || || ||
|| || | | || || ||
|| || | | || || ||
|| || | | || || ||
|+-----++-----+ +------------------------------++-----++-----+|
+--------------------------------------------------------------+
但目前我有这个:
+--------------------------------------------------------------+
| |
| +----+ +----+ +--------------------------+ +----+ +----+ |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| +----+ +----+ +--------------------------+ +----+ +----+ |
| |
+--------------------------------------------------------------+
如何在此布局中控制单个边距?
P.S。
答案 0 :(得分:1)
作为一个不需要更改整个布局模型的快速解决方案,您只需在表结构中添加一个不可见的分隔符,就像在此edited fiddle中一样:
hr {
display: table-cell;
width: 10px;
visibility: hidden;
}
答案 1 :(得分:1)
table-cell
显示类型无法识别边距,因此设置左右边距无法获得所需的结果。
一种解决方法是在display: block
元素上指定.center
:
.container {
display: table;
width: 100%;
height: 100px;
border-spacing: 5px;
}
.all {
display: table-cell;
border: 1px solid #333;
}
.left {
width: 45px;
}
.right {
width: 45px;
}
.center {
width: auto;
display: block;
margin: 0 10px 0 10px;
border: 1px solid red;
height: inherit;
}
小提琴:http://jsfiddle.net/audetwebdesign/GNVfG/
一个限制是父块.container
需要一个显式高度,以便所有.container
子元素都可以继承或计算相同的高度。
感谢向Ilya Streltsyn建议解决保证金问题的display: block
。
答案 2 :(得分:0)
这是你的意思吗?
.center{
margin-left: 10px;
}
通过向左侧或右侧边距添加中心,您将获得所需的唯一间隙