我想有3个div对齐在一个容器div，就像这样:
[[LEFT] [CENTER] [RIGHT]]
容器div是100%宽(没有设定宽度)，中心div在调整容器大小后应该保持在中心。
所以我设置:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
但它变成了:
[[LEFT] [CENTER] ]
[RIGHT]
任何建议吗?
当前回答
使用CSS，像这样放置你的div(浮动优先):
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
附注:你也可以向右浮动，然后向左浮动，然后向中心浮动。重要的是，浮动出现在“主”中心部分之前。
P.P.S.你经常想要最后在#容器里的这个片段:<div style="clear:both;></div>，它将垂直扩展#容器以包含两侧浮动，而不是仅从#中心取高度，并可能允许两侧突出底部。
其他回答
使用CSS网格
layout { display: grid; grid-template-columns: repeat(3,1fr); } start-column { justify-self: start; } center-column { justify-self: center; } end-column { justify-self: end; } <layout> <start-column> <button>Start</button> </start-column> <center-column> <p>Center Donec non urna ipsum. Nullam euismod, lacus ac malesuada varius, mauris erat ullamcorper erat, eget dignissim tortor felis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi faucibus turpis et augue dapibus bibendum.</p> </center-column> <end-column> <a href="#">End</a> </end-column> </layout>
#warpcontainer {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
使用CSS，像这样放置你的div(浮动优先):
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
附注:你也可以向右浮动，然后向左浮动，然后向中心浮动。重要的是，浮动出现在“主”中心部分之前。
P.P.S.你经常想要最后在#容器里的这个片段:<div style="clear:both;></div>，它将垂直扩展#容器以包含两侧浮动，而不是仅从#中心取高度，并可能允许两侧突出底部。
使用CSS3 Flexbox可以很容易地做到这一点，这个功能将在未来被几乎所有浏览器使用(当<IE9完全死亡时)。
查看浏览器兼容性表
HTML
<div class="container">
<div class="left">
Left
</div>
<div class="center">
Center
</div>
<div class="right">
Right
</div>
</div>
CSS
.container {
display: flex;
flex-flow: row nowrap; /* Align on the same line */
justify-content: space-between; /* Equal margin between the child elements */
}
Output: .container { display: flex; flex-flow: row nowrap; /* Align on the same line */ justify-content: space-between; /* Equal margin between the child elements */ } /* For Presentation, not needed */ .container > div { background: #5F85DB; padding: 5px; color: #fff; font-weight: bold; font-family: Tahoma; } <div class="container"> <div class="left"> Left </div> <div class="center"> Center </div> <div class="right"> Right </div> </div>
可能的答案，如果你想保持HTML的顺序而不使用flex。
HTML
<div class="a">
<div class="c">
the
</div>
<div class="c e">
jai ho
</div>
<div class="c d">
watsup
</div>
</div>
CSS
.a {
width: 500px;
margin: 0 auto;
border: 1px solid red;
position: relative;
display: table;
}
.c {
display: table-cell;
width:33%;
}
.d {
text-align: right;
}
.e {
position: absolute;
left: 50%;
display: inline;
width: auto;
transform: translateX(-50%);
}
码笔链接
