CSS左、右和重复中间对齐。
提问于 2014-04-03 11:40:49
我的左边和右边有一个.png，第三个要在窗口的(未知)宽度上重复。
#wrap{
width: 100%;
height: 10px;
}
#a{
float: left;
background-color: #800000;
width: 10px;
height: 10px;
}
#b{
background-color: #008000;
margin-left: 10px;
margin-right: 10px;
height: 10px;
}
#c{
float: right;
background-color: #000080;
width: 10px;
height: 10px;
}<div id="wrap">
<div id="a">
</div>
<div id="b">
</div>
<div id="c">
</div>
</div>
像这样，float: right元素在第二行，就像以前一样。
如果我将display: inline (或~-block)添加到中间元素，它不会显示，但左/右都可以。
怎么了？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-03 11:46:21
浮动元素必须放在HTML代码中的非浮动内容之前，即使它们在右边浮动。所以，将#c放在HTML中的#b之前。
Stack Overflow用户
发布于 2014-04-03 11:46:05
你可以试试这个，我重新排列了html
http://jsfiddle.net/sKqZJ/128/
<div id="wrap">
<div id="a"></div>
<div id="c"></div>
<div id="b"></div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22847400
复制相关文章
点击加载更多
腾讯云开发者
