html - CSS:div "float:middle"而不是 "float:left;"是否可以带 margin-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

你可以这样做 in some new browsers使用 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 位于 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;
}