Html 如何将 3 个 div 左右对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15134389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align 3 divs left-center-right?
提问by membersound
How can I align 3 divs in one line left-center-right without having to define explicit sizes?
如何在一行中左中右对齐 3 个 div 而不必定义明确的大小？
Left should be aligned most to the left edge, and right to the right edge.
左应该最对齐到左边缘，右对齐到右边缘。
The following does not work:
以下不起作用：
<div style="float: left;">
left
</div>
<div style="float: right;">
right
</div>
<div style="margin: 0 auto;">
center
</div>
回答by Sowmya
回答by zkanoca
<div style="width:100%;margin:0 auto; padding: 0">
<div style=" float:left;width:32%;border: thin solid black">
left
</div>
<div style=" float:left;width:32%;border: thin solid black">
center
</div>
<div style=" float:left;width:32%;border: thin solid black">
right
</div>
</div>
<div style="clear:both">
</div>
回答by chriz
Heres an example of how to do this by placing the floats in the correct order.
这是一个如何通过以正确的顺序放置浮点数来做到这一点的示例。
<div class="square" style="float: left;">left</div>
<div class="square" style="float: right;">right</div>
<div class="square" style="margin:0 auto !important;">center</div>
.square {
width:50px;
height:50px;
background-color:#ff0000;
text-align:center;
border: 1px solid #000;
}
回答by Rohan Kumar
Try this
尝试这个
CSS
CSS
div{width:33%;}
HTML
HTML
<div style="float: left;border:1px solid red;">
left
</div>
<div style="float: right;border:1px solid green;">
right
</div>
<div style="margin: 0 auto;border:1px solid blue;">
center
</div>
回答by ravy amiry
It's not possible actually do it, without knowing about the content and layout pattern. But for a begining point, you can try this:
在不了解内容和布局模式的情况下，实际上是不可能做到的。但作为一个起点，你可以试试这个：
HTML:
HTML：
<div class="clearfix holder">
<div class="column left">
Some Contents Here...
</div>
<div class="column middle">
Some Contents Here...
</div>
<div class="column right">
Some Contents Here...
</div>
</div>
CSS:
CSS：
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.holder{
text-align:center;
}
.column{
display:inline-block;
*display:inline;
*zoom:1;
width:auto;
}
.left{
background-color:#ff0;
float:left;
}
.middle{
background-color:#f0f;
margin:0 auto;
}
.right{
background-color:#0ff;
float:right;
}
