我想要
div 1 to float on the left
div 2 to float in the center
div 3 to float on the right.
但是没有“漂浮在中心”这样的东西
解决方案？
答案 0 :(得分：7)
您可以使用flexbox模型执行此操作in some new browsers： jsFiddle
<强> HTML
<div>
<div>left div</div>
<div>middle div</div>
<div>right div</div>
</div>
<强> CSS
body {
width: 100%;
height: 50px;
display: -webkit-box;
/* iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* Firefox 19- */
display: -ms-flexbox;
/* IE 10 */
display: -webkit-flex;
/* Chrome */
display: flex;
/* Opera 12.1, Firefox 20+ */
/* iOS 6-, Safari 3.1-6 */
-webkit-box-orient: horizontal;
-webkit-box-pack: justify;
/* Firefox 19- */
-moz-flex-direction: row;
-moz-justify-content: space-between;
/* Chrome */
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
/* IE10 */
-ms-flex-direction: row;
-ms-justify-content: space-between;
/* Opera 12.1, Firefox 20+ */
flex-direction: row;
justify-content: space-between;
}
div {
width: 25%;
background-color: #EFEFEF;
}
带有各种前缀的display: flex;属性告诉浏览器div应该使用flexbox模型来布置内部的内容。
flex-direction: row;和justify-content: space-between;的各种前缀形式告诉浏览器在div内列出div，并将display: flex;设置为一行他们之间的空间平分。
正如评论中所提到的，上述并不是真正的跨浏览器友好，因为所有浏览器尚未正确支持新的flexbox模型。如果你需要IE8 +支持，你可以使用下面的代码，它应该适用于所有浏览器和IE8 +。 jsFiddle
<强> HTML
<div>left div</div>
<div class="middle">
<div class="inthemiddle">middle div</div>
</div>
<div>right div</div>
<强> CSS
html {
display: table;
width: 100%;
}
body {
display: table-row;
width: 100%;
}
div {
display: table-cell;
background-color: #EFEFEF;
min-width: 200px;
}
div.middle {
width: 100%;
background-color: #FFF;
text-align: center;
}
div.inthemiddle {
text-align: left;
display: inline-block;
margin: 0px auto;
}
答案 1 :(得分：3)
CSS不遵守物理定律。不要试图成为一个完美主义者，你的“宇宙内部，中心是独裁者，而不是左派或右派”谈话。但这是我用HTML / CSS做的方式。
HTML
<div id="wrapper">
<div id="one">
<div id="oneIn">
DIV ONE
</div>
</div>
<div id="two">
<div id="twoIn">
DIV TWO
</div>
</div>
<div id="three">
<div id="threeIn">
DIV THREE
</div>
</div>
</div>
CSS
body{
background: black;
}
#wrapper{
width: 600px;
margin: 0 auto;
height: 200px;
}
#one{
width: 200px;
height: 200px;
margin: 0;
float: left;
}
#oneIn{
width: 150px;
height: 100%;
background: white;
float: left;
}
#two{
width: 200px;
height: 200px;
margin: 0;
float: left;
}
#twoIn{
width: 150px;
height: 100%;
background: white;
margin: 0 auto;
}
#three{
width: 200px;
height: 200px;
margin: 0;
float: left;
}
#threeIn{
width: 150px;
height: 100%;
background: white;
float: right;
}
答案 2 :(得分：3)
您可以使用margin auto来居中div。
<div style="text-align: center;">
<div style="width: 200px; background-color: lightblue; float: left; text-align: left;">1</div>
<div style="width: 200px; background-color: lightblue; float: right; text-align: left;">3</div>
<div style="width: 200px; background-color: lightblue; margin-left: auto; margin-right: auto; text-align: left;">2</div>
</div>
答案 3 :(得分：1)
我这样做，这是我的版本 - 希望它有所帮助。如果你在静态html中做一个盒子，它会很酷 - 让它动态工作是另一回事：）
<div class="boxes">
<div class="box leftbox"></div>
<div class="box"></div>
<div class="box rightbox"></div>
</div>
.boxes {width:100%; text-align:center;}
.boxes .box {width:30%; height:150px; background:#f0f0f0; display:inline-block}
.leftbox {float:left;}
.rightbox {float:right;}
所以基本上它是一个100％宽度的包装器，css告诉包装器将所有div放在里面。显示：内联块将框放入行中，左右浮动告诉左右框尽管居中但仍浮动到它们的两侧。希望它适合你们，适合我的大多数浏览器，干杯。
答案 4 :(得分：0)
我假设有3列div 1（1st），div 2（2nd）和div 3（3rd）。然后将div 1向左浮动并固定宽度，如200px或20％。再次浮动div 2，然后div 2坐在div 1旁边（左边距离200px），最后将div 3向右浮动。做一点数学，所以三个div都可以坐在一起。
答案 5 :(得分：0)
您可以使用中心标签，但它们通常不受欢迎。
答案 6 :(得分：0)
一个非常迟到的回复，但站点的人提供了一个很酷的浮动中间 https://www.sitepoint.com/community/t/css-test-your-css-skills-number-42-float-center-revisited/18797
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:#ccc; }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
position:relative;
}
.col1, .col2 {
width:48%;
float:left;
margin:1%;
background:#eee;
text-align:justify;
}
.col2 { float:right }
p {
padding:5px;
margin:0 0 1em;
}
.col1:before, .col2:before {
float:right;
width:1px;
height:100px;
content:" ";
}
.col2:before { float:left }
.col1 div {
float:right;
clear:right;
height:154px;
width:95px;
}
.col2 p:first-child:before {
float:left;
clear:left;
height:154px;
width:90px;
content:" ";
}
.col1 div img {
width:165px;
position:absolute;
border:10px solid #fff;
left:50%;
margin:0 0 0 -93px;
top:115px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col1">
<div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>