CSS：可以将div“float：middle”而不是“float：left;”。与margin-left？ [英] CSS: Can a div "float:middle" rather than "float:left;" with margin-left?

问题描述

我想要

  div 1浮在左边
 div 2浮在中间
 div 3浮在右边。 
  

但没有float in the center这样的东西

解决方案？

解决方案

您可以执行此操作 在一些新的浏览器中使用flexbox模型： jsFiddle

$ b

p $ p> < div>
< div> left div< / div>
< div>中部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 * / 
显示：-webkit-flex; 
 / * Chrome * / 
 display：flex; 
 / * Opera 12.1，Firefox 20+ * / 
 / * iOS 6-，Safari 3.1-6 * / 
 -webkit-box-orient：horizo​​ntal; 
 -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 中用 display：flex; div c $ c>设置为一行，它们之间的空格相等。

如注释中提到的，上面的不是真正的跨浏览器友好， flexbox模型尚未在所有浏览器中正确支持。如果你需要IE8 +支持，你可以使用下面的代码，它应该在所有浏览器和IE8 +工作。 jsFiddle

HTML

 < div> left div< / div& 
< div class =middle> 
< div class =inthemiddle>中部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; 
} 
  

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 ?

解决方案

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

这篇关于CSS：可以将div“float：middle”而不是“float：left;”。与margin-left？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！