CSS:div可以"浮动:中间"而不是"浮动:左"; 保证金左？

Question

我想要

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

但没有"漂浮在中心"这样的事情

方案？

Answer 1

您可以在一些使用flexbox模型的新浏览器中执行此操作: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将divwith 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;
}

Answer 2

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 3

您可以使用边距自动将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>