3列布局（3列中的两列不会在包装内浮动）

Question

这里的Obective：将第2列（skyblue）和第3列（三文鱼）浮在其包装内（绿色）。第一列（lightgreen）向左浮动，第二列（skyblue）向左浮动，第三列（鲑鱼）向右浮动。我在这做错了什么？他们为什么坐在我的包装纸下？我尝试了明确的修复并扩展了包装器，并且无法将这些列放在容器内。建议？

演示 - http://codepen.io/Chris-Brennan/pen/pJORJY

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 #wrapperGreen {
   margin: 0 auto;
   width: 960px;
   height: 700px;
   background: green;
 }
 #mainContentLightgreen {
   width: 520px;
   height: 700px;
   background: lightgreen;
 }
 #contentleftSkyblue {
   width: 200px;
   height: 600px;
   background: skyblue;
   float: left;
 }
 #contentrightSalmon {
   width: 200px;
   height: 600px;
   background: salmon;
   float: left;
 }
 #footer {
   height: 100px;
   background: black;
   clear: both;
 }

<div id="wrapperGreen">
  <div id="mainContentLightgreen">
  </div>

  <div id="contentleftSkyblue">
  </div>

  <div id="contentrightSalmon">
  </div>

  <div id="footer">
  </div>
</div>

Answer 1

你没有在

中设置浮动

#mainContentLightgreen{
width:520px;
height:700px;
background:lightgreen;  
float: left;
}

查看此sample

Answer 2

而不是使用display:inline-block;或display:table-row;

浮动

如果CSS3是一个选项，您不必担心兼容性，可以使用column-count。

Float用于浮动元素，以便打破文档流程。

例如，您想要将图像浮动到左侧并将文本环绕在其周围。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.align {
  display: inline-block;
  vertical-align:top;
}
#wrapperGreen {
  margin: 0 auto;
  width: 960px;
  height: 700px;
  background: green;
}
#mainContentLightgreen {
  width: 520px;
  height: 700px;
  background: lightgreen;
}
#contentleftSkyblue {
  width: 200px;
  height: 600px;
  background: skyblue;
}
#contentrightSalmon {
  width: 200px;
  height: 600px;
  background: salmon;
}
#footer {
  height: 100px;
  background: black;
  clear: both;
}

＆＃13;

<div id="wrapperGreen">
  <div id="mainContentLightgreen" class="align">
  </div>

  <div id="contentleftSkyblue" class="align">
  </div>

  <div id="contentrightSalmon" class="align">
  </div>

  <div id="footer">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果我通过将div嵌入彼此内部来正确理解你，我就可以使用它。例如绿色包装内的鲑鱼div

    <div id ="wrapperGreen"><div id="contentrightSalmon"></div>
    </div>

Answer 4

我不知道我是否误解了，但我认为它是你写作的顺序？

这会解决您的问题吗？

<div id ="wrapperGreen">

<div id="contentleftSkyblue">
</div>

<div id="contentrightSalmon">
</div>

<div id="mainContentLightgreen">
</div>

<div id="footer">
</div>

</div>