Html CSS：div 可以是“float:middle”而不是“float:left;” 有边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16643315/
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: Can a div "float:middle" rather than "float:left;" with margin-left?
提问by the_lotus
i would like
我想
div 1 to float on the left
div 2 to float in the center
div 3 to float on the right.
but there is no such thing as "float in the center"
但没有“漂浮在中心”这样的东西
solutions ?
解决方案？
回答by Mathijs Flietstra
You can do this in some new browserswith the flexbox model: jsFiddle
您可以使用 flexbox 模型在一些新浏览器中执行此操作：jsFiddle
HTML
HTML
<div>
<div>left div</div>
<div>middle div</div>
<div>right div</div>
</div>
CSS
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;
}
The variously prefixed display: flex;property tells the browser that the divshould use the flexbox model to layout the contents inside itself.
不同前缀的display: flex;属性告诉浏览器div应该使用 flexbox 模型来布局其内部的内容。
The variously prefixed forms of flex-direction: row;and justify-content: space-between;tell the browser to lay out the div's inside the divwith display: flex;set as a row with the space between them equally split.
的不同前缀的形式flex-direction: row;，并justify-content: space-between;告诉浏览器进行布局div的内部div有display: flex;一组与它们之间的空间连续平分。
As mentioned in the comments, the above is not really cross-browser friendly, as the new flexbox model is not yet properly supported in all browsers. If you need IE8+ support, you could use the code below instead, which should work in all browsers and IE8+. jsFiddle
正如评论中提到的，上述内容并不是真正的跨浏览器友好的，因为新的 flexbox 模型尚未在所有浏览器中得到正确支持。如果你需要 IE8+ 支持，你可以使用下面的代码，它应该适用于所有浏览器和 IE8+。jsFiddle
HTML
HTML
<div>left div</div>
<div class="middle">
<div class="inthemiddle">middle div</div>
</div>
<div>right div</div>
CSS
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;
}
回答by the_lotus
You can use margin auto to center a div.
您可以使用 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>
回答by ZZPLKF
CSS does not obey the laws of physics. Stop trying to be a perfectionist with your "inside the universe, the center is the dictator, not the left or the right site" talk. But here's how I would do it with HTML/CSS.
CSS 不遵守物理定律。不要再试图成为一个完美主义者，“在宇宙内部，中心是独裁者，而不是左派或右派”的谈话。但这是我将如何使用 HTML/CSS 做到这一点。
HTML
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
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;
}
回答by Sean
I do it this way, this is my made up version - hopefully it helps. If you're doing one off boxes in static html, it'll be cool - making it work dynamically is another thing :)
我这样做，这是我编造的版本 - 希望它有所帮助。如果你在静态 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;}
So basically it's a wrapper with 100% width, css tells the wrapper to centre all divs inside. The display:inline block puts the boxes in line and the float left and right tell the left and right boxes to float to their sides despite being centred. Hope it works for you guys, works on most browsers for me, Cheers.
所以基本上它是一个 100% 宽度的包装器，css 告诉包装器将所有 div 居中。display:inline 块将盒子排成一行，左右浮动告诉左右盒子尽管居中但浮动到两侧。希望它对你们有用，对我来说适用于大多数浏览器，干杯。
回答by Timo Huovinen
A very late reply, but the guys at sitepoint have provided a cool float middle https://www.sitepoint.com/community/t/css-test-your-css-skills-number-42-float-center-revisited/18797
一个很晚的回复，但站点点的人提供了一个很酷的浮动中间 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>
回答by noahdotgansallo
You can use center tags but they are usually frowned upon.
您可以使用中心标签，但它们通常不受欢迎。
回答by Tawfiqur Rahman
I assume there are 3 column div 1 (1st), div 2(2nd) and div 3(3rd). then float div 1 to left and fixed an width like 200px or 20%. again float div 2 left then div 2 sit beside the div 1 (200px left from left margin) and finally float div 3 to right. do a little math so all three div can sit together.
我假设有 3 列 div 1 (1st)、div 2(2nd) 和 div 3(3rd)。然后将 div 1 向左浮动并固定宽度，如 200px 或 20%。再次将 div 2 向左浮动，然后将 div 2 放在 div 1 旁边（距左边距 200 像素），最后将 div 3 向右浮动。做一些数学运算，以便所有三个 div 可以坐在一起。
