html - CSS：div可以“float：middle”而不是“float：left;” 左边距？

Question

我想

div 1 to float on the left
div 2 to float in the center
div 3 to float on the right.

但不存在“漂浮在中心”之类的东西

解决方案？

Answer 1

You can do this in some new browsers with the flexbox model: 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;
}

The variously prefixed display: flex; property tells the browser that the div should use the flexbox model to layout the contents inside itself.

The variously prefixed forms of flex-direction: row; and justify-content: space-between; tell the browser to lay out the div's inside the div with display: flex; set as a row with the space between them equally split.

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

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;
}

Answer 2

您可以使用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>

Answer 3

http://jsfiddle.net/dPEwc/1/

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;
}

Answer 4

我这样做，这是我编造的版本 - 希望它有所帮助。如果你在静态 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 居中。display:inline 块将盒子排成一行，左右浮动告诉左右盒子浮动到它们的两侧，尽管居中。希望它适用于你们，适用于我的大多数浏览器，干杯。

Answer 5

我假设有 3 列 div 1 (1st)、div 2(2nd) 和 div 3(3rd)。然后将 div 1 向左浮动并固定宽度，例如 200px 或 20%。再次将 div 2 向左浮动，然后将 div 2 放在 div 1 旁边（距左边距 200px），最后将 div 3 向右浮动。做一些数学运算，这样三个 div 就可以坐在一起了。

Answer 6

您可以使用中心标签，但它们通常不受欢迎。

Answer 7

一个很晚的回复，但站点点的人提供了一个很酷的浮动中间 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>