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

我正在使用16个网格系统。两个8列div（并排浮动）。在8列div中，我想要有一个5列div到左边，两个三列div到右边堆叠在一起。我尝试了所有我能想到并发现的东西，似乎没有任何工作。我使用的网格系统是Skeleton。这是HTML现在的HTML & CSS。我曾尝试将5列网格向左移动，另两个向右移动。我试过清除修复。请帮忙！Divs不会在嵌套网格系统中正确浮动

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

来源

2014-10-16 user3192569

我是否错过了什么？ 5 + 3 + 3 = 11。你如何期望结束8列？ – 2014-10-16 22:57:09

那么，我该如何做我想要完成的事情？我会附上我的设计图片，但我没有看到插入图片的方法。我需要它成为八栏之内的一个更大的Div，然后是它旁边的两个更小的div堆叠在一起。 – user3192569 2014-10-16 22:59:46

即使当我删除第二个3列div我仍然不能得到五列和三列相互浮动 – user3192569 2014-10-16 23:03:54

你的容器不会相互漂浮的原因是因为你已经给出了每个100％的宽度。这迫使容器填满它们所在的父容器内的所有水平空间。这意味着下一个div将被推下，并且它们会堆叠起来。

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

注意：你仍然有一个数学问题，你需要8个“列”但是正在创建11个。也许这只是你的语义问题，因为你已经清楚地列出了11列你的标记，但这是你应该理清的，因为它显然令人困惑。

http://jsfiddle.net/40wwjL5q/

来源

2014-10-16 23:13:30

我删除了第三个三列的div所以我只有5列和3列div。我删除了100％的宽度，它不工作，没有浮动。然后，我在5列1上添加了200像素的宽度，在3列上添加了100像素的宽度，并且它应该并排放置，并且它们不会漂浮。 – user3192569 2014-10-17 00:38:45

我发布了一个工作示例的链接。这是你的代码，从你的CSS中移除宽度属性。你确定你使用的是你发布的相同标记吗？ – 2014-10-17 01:11:14

谢谢。我最终将网格系统切换到了Zen网格。它的工作原理非常棒，除了IE以外，其他都很棒。在IE中，它将网格中的所有DIVS推向左侧。任何想法可能会导致或如何解决它？ – user3192569 2014-10-18 20:53:48

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

回答

相关问题