我在此网站上找到了 center a div between two floats 的解决方案。解决方案工作正常,但我现在有一个双边框。
CSS
.trilink_container {
margin:5px;
overflow: hidden; /* contain floated elements */
}
.trilink_all {
border: 1px solid #CCCCCC;
color: #444444;
text-shadow: 0 1px 1px #F6F6F6;
background: #fdfdfd;
background: -o-linear-gradient(top, #fdfdfd, #eee);
background: -ms-linear-gradient(top, #fdfdfd, #eee);
background: -moz-linear-gradient(top, #fdfdfd, #eee);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfdfd), color-stop(1, #eee));
background: -webkit-linear-gradient(#fdfdfd, #eee);
background: linear-gradient(top, #fdfdfd, #eee);
text-align:center;
}
.trilink_item {
float: left;
width: 32%;
margin-left:5px;
}
.trilink_right {
float: right;
width: 32%;
margin-right:5px;
}
.trilink_center {
margin-left: auto;
margin-right: auto;
}
HTML
<div class="trilink_container">
<div class="trilink_item trilink_all">Left Test</div>
<div class="trilink_right trilink_all">Right Text</div>
<div class="trilink_center trilink_all">Centre Text</div>
</div>
我还将代码添加到 jfiddle 。
顺便说一句,我知道我的编码有点乱,一旦我有解决方案就打算把它整理一下:)有什么想法吗?
答案 0 :(得分:4)
将overflow: hidden
(或auto
; visible
以外的任何内容)添加到.trilink_center
,您将得到我想要的内容(see this fiddle)。< / p>
这会建立一个新的block formatting context,它会改变流程的工作方式。有关讨论,请参阅this article。
答案 1 :(得分:1)
如果您要删除双边框,请从margin
和left
div
right
.trilink_item {
float: left;
width: 32%;
//margin-left:5px; remove it
}
.trilink_right {
float: right;
width: 32%;
//margin-right:5px; remove it
}
答案 2 :(得分:0)
如果要消除边缘附近的双边框,请尝试此fiddle。它会分别删除左右div的border-left
和border-right
答案 3 :(得分:0)
`.trilink_center {
margin-left: auto;
margin-right: auto;
/* float left or right
float: left;
}`
这就是