CSS 同行对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/525961/
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
CSS same-line aligning
提问by
Is there an elegant way to align 3 elements left, center, and right on the same line?
有没有一种优雅的方法可以在同一条线上向左、居中和向右对齐 3 个元素？
Right now I'm using 3 <div>'s all with width:33%;float:left; and it's not working too well.
现在我正在使用 3<div>的全部宽度：33%;float:left; 而且效果不太好。
回答by Johannes Weiss
that works for me:
这对我行得通：
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
do you mean the same?
你的意思是一样的吗？
回答by Gary Green
You may get strange results if there is any margin in the element you are adding it to. This is where width: 33%may not work because you will need to factor in the amount of margin that element has.
如果要添加的元素中有任何边距，则可能会得到奇怪的结果。这width: 33%可能不起作用，因为您需要考虑该元素的边距量。
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
This will cause it not work as expected because of the margin added to each div. Similarly, if you add too much of a border to each div you will get a similar result border: 5px solid !important;
由于添加到每个 div 的边距，这将导致它无法按预期工作。同样，如果你给每个 div 添加过多的边框，你会得到类似的结果border: 5px solid !important;
As soon as you take away the margin from the above code, it should work as expected.
一旦你从上面的代码中去掉边距，它应该会按预期工作。
回答by idevelop
Try this:
尝试这个：
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
You need to take into account that the left and right divs do not push the container box (a div around the code above) height down, even if they have more content than the center div, the only one not floated. A clearfix will take care of this.
您需要考虑到左右 div 不会将容器框（上面代码周围的 div）的高度向下推，即使它们的内容比中心 div 多，只有一个没有浮动。clearfix 会解决这个问题。
回答by idevelop
I created a page with all three methods for comparison at http://www.salestime.com/Ref/LeftCenterRight.html.
我在http://www.salestime.com/Ref/LeftCenterRight.html创建了一个包含所有三种方法的页面以进行比较。
回答by sebnukem
This works for me. I don't know if it's the most elegant, but it does do the work: it reacts well to the "cell" contents and resizing.
这对我有用。我不知道它是否是最优雅的，但它确实做到了：它对“单元格”内容和调整大小反应良好。
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>
回答by AnthonyWJones
Here is yet another varition of the theme:-
这是主题的另一个变体：-
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Note that the border is possible by using an inner div for each of the 'panel' divs. Also gives the center the remain 1% of pixels.
请注意，可以通过为每个“面板”div 使用内部 div 来实现边框。还给中心留下 1% 的像素。
回答by flesh
Float LeftBlock 'left', CenterBlock 'none' and RightBlock 'right'. But make sure the Center element appears last on your HTML page, otherwise it wont work.
Float LeftBlock 'left', CenterBlock 'none' 和 RightBlock 'right'。但是请确保 Center 元素最后出现在您的 HTML 页面上，否则它将无法工作。
回答by Chris Ballance
Float the first two left and float the third one right, while ensuring the widths will fit the line you are placing them on.
将前两个向左浮动，将第三个向右浮动，同时确保宽度适合您放置它们的行。
Use pixel widths if your design allows for it.
如果您的设计允许，请使用像素宽度。
