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

时间:2014-06-20 13:12:47

标签: html css css3

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

http://jsfiddle.net/c9cwB/

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来修复它。

5 个答案:

答案 0 :(得分:2)

您可以将.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;
}

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

尝试Demo

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

答案 4 :(得分:0)

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

.widget {
  float: left;
}

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

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