Question

我使用的是16格系统。两个8列div（并排浮动）。在8列div中，我想在左边有一个5列div，在右边堆叠两个三列div。我已经尝试了所有我能想到的东西并找到了似乎没有任何效果。我使用的网格系统是Skeleton。这是HTML＆amp;现在的CSS。我已经尝试将5列网格向左浮动，另外两个向右浮动。我尝试过明确的修复方法。请帮忙！

<div class="container">
<article id="main">
<div class="eight columns">
      <section class="five columns bulletin alpha">
        <h2>Bulletin Board</h2>
          <p>Post 1</p>
      </section>
      <div class="clear"></div>
      <aside class="three columns take5 omega">
       <ul>
        <li><h3>Take 5</h3></li>
        <li><a href="#"><img src="http://placehold.it/75x75" alt="Learning Break icon"  /></a></li>
                <li><h3>Learning Break</h3></li>
              </ul>
        </aside>
      <aside class="three columns longTerm omega">
      <ul>
      <li><h3>Long Term</h3></li>
      <li><a href="#"><img src="http://placehold.it/75x75" alt="Long Term Learning icon" /></a></li>
      <li><h3>Learning</h3></li>
      </ul>
     </aside>
</div>

The CSS looks like this:
.bulletin {
margin: 0;
padding: 0;
width: 100%;
float: left;
    }
.take5, .longTerm {
margin: 0;
width: 100%;
padding: 0;
float: right;
    }

Answer 1

您的容器不会相互浮动的原因是因为您给每个容器的宽度都是100％。这会强制容器填满它们所在的父容器内的所有水平空间。这意味着下一个div将被推到它下面，它们会堆积起来。

删除CSS中的width: 100%，或者最好设置一个有限的宽度，它们会相互浮动。

注意：您仍然有数学问题需要8＆＃34;列＆＃34;但是正在创造11.也许这只是你语义的一个问题，因为鉴于你已经在你的标记中加入了11列，你会清楚地结束，但它是你的一部分应该理清，因为它显然令人困惑。

http://jsfiddle.net/40wwjL5q/

Divs不会在嵌套网格系统中正确浮动

1 个答案: