Question

所以我遇到了一个难以解释的问题。这是JSFiddle显示问题：

CSS：

#container {
  width: 400px;
  height: 400px;
}

.div1 {
  width: 50%;
  display: inline-block;
  height: 50%;
  background: green;
  float: left;
}

.div2 {
  width: 50%;
  height: 50%;
  display: inline-block;
  background: blue;
  float: left;
}

.div3 {
  width: 50%;
  background: red;
  display: inline-block;
  height: 100%;
  float: left;
}

HTML：

<div id="container">
      <div class="div1"></div> 
      <div class="div3"></div>
      <div class="div2"></div>
</div>

我想要的是蓝框位于绿色框下方，所以它看起来像一个网站仪表板。

我该怎么做？您可以更改css / html来修复它。

Answer 1

您可以将.div3向右浮动，并将clear:left;添加到.div2以获得所需的布局（您可以删除显示属性，因为它与浮动无关）。

我还通过向左侧div添加一个类并使用它来设置样式来简化您的 CSS 代码。

<强> DEMO

HTML：

<div id="container">
    <div class="div1 left"></div>
    <div class="div3"></div>
    <div class="div2 left"></div>
</div>

CSS：

/* Styles go here */
 #container {
    width: 400px;
    height: 400px;
}
.left {
    float:left;
    width: 50%;
    height: 50%;
}
.div1 {
    background: green;
}
.div2 {
    background: blue;
    clear:left;
}
.div3 {
    width: 50%;
    background: red;
    height: 100%;
    float: right;
}

Answer 2

你必须改变div 3类的浮动。

它应该是浮动的：对;而不是浮动：左;

.div3 {
  width: 50%;
  background: red;
  display: inline-block;
  height: 100%;
  float: right;
}

Answer 3

如何将你想要的那些包装在另一层的左边：

http://jsfiddle.net/dactivo/c9cwB/6/

<div id="container">
    <div id="wrapper">
      <div class="div1"></div>    
            <div class="div2"></div>
</div>
  <div class="div3"></div>
    </div>

/* Styles go here */
#container {
  width: 400px;
  height: 400px;
}
#wrapper{width:50%;  display: inline-block;height:100%;float:left}
.div1 {
  width: 100%;
  display: inline-block;
  height: 50%;
  background: green;
  float: left;
}

.div2 {
  width: 100%;
  height: 50%;
  display: inline-block;

  background: blue;
  float: left;
}

.div3 {
  width: 50%;
  background: red;
  display: inline-block;
  height: 100%;
  float: left;
}

Answer 4

尝试Demo

  <div id="container">
      <div class="div3 right"></div>
      <div class="div1"></div> 
      <div class="div2"></div>
 </div>

Answer 5

假设.widget是仪表板的项目/框，您可以使用：

.widget {
  float: left;
}

.widget:nth-child(even) {
  float: right;
}

演示：http://codepen.io/torresandres/pen/wnIxF

CSS仪表板列不会彼此相邻浮动

5 个答案: