2016-02-29 70 views
1

在一个部分中,我有4个div。当前浮动到左边的第一个div的宽度和高度均以像素为单位。我想要的是根据其他div的高度动态生成高度。我很困难。这里是我的jsfiddle: https://jsfiddle.net/ksaluja/62o7ydan/谢谢!为divs组设置相等的高度

<section> 
<div class="attempt"> 

</div> 
<div> 
    <ul id="menu"> 
     <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li> 
     <li><a style="background:#788291">Button2</a></li> 
    </ul> 
</div> 

<div> 
    <H2>TITLE</H2> 
    <p> 
     BADKADA 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 

    <p> 
     Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring. 
    </p> 
</div> 

<div> 
    <H2>TITLE2</H2> 
    <p> 
     BADKADA 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 

    <p> 
     Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring. 
    </p> 
</div> 
</section> 

CSS

.attempt { 
    float:left; 
    width: 15px; 
    height: 1290px; 
    background: #3F4E64; 
    margin-right:20px; 
} 
+0

你有严格的限制在其浏览器必须支持? – Jacob

回答

0

您可以使用CSS flexbox来实现此布局。

使section为flex容器,它将div转换为flex项目。

但将最后三个div包装在嵌套的柔性容器中。现在section有两个弹性物品,并排和共享相同的高度。没有漂浮或宣布的高度必要。每列将跟踪另一列。内容较高的列设置两者的高度。

CSS

.outer-flex-container { 
    display: flex; 
} 

.attempt { 
    width: 15px; 
    background: #3F4E64; 
    margin-right: 20px; 
} 

HTML

<section class="outer-flex-container"> 

    <div class="attempt"></div><!-- flex item #1 --> 

    <section class="inner-flex-container"><!-- flex item #2 --> 
     <div> 
      <ul id="menu"> 
       <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li> 
       <li><a style="background:#788291">Button2</a></li> 
      </ul> 
     </div> 

     <div> 
      <H2>TITLE</H2> 
      <p>BADKADA</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus Fusce luctus ipsum in...</p> 
     </div> 

     <div> 
      <H2>TITLE</H2> 
      <p>BADKADA</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus Fusce luctus ipsum in...</p> 
     </div> 
    </section><!-- END .inner-flex-container --> 

</section><!-- END .outer-flex-container --> 

Revised Demo


了解更多关于等高柱与Flexbox的位置:


注意Flexbox将被所有主流浏览器,支持except IE 8 & 9。一些最新的浏览器版本,例如Safari 8和IE10,需要vendor prefixes。要快速添加所需的所有前缀,请使用Autoprefixerthis answer中的更多浏览器兼容性详细信息。

+0

我不是100%确定如果我可以使用弹性盒,但这绝对有效!谢谢 –

+0

你的担心是什么?你为什么认为这可能无效? –

+0

对于本网站上的答案,您会发现有用,[考虑upvote](http://stackoverflow.com/help/someone-answers)。没有义务。只是提高质量内容的一种方式。 –

0

If you're able to use them,柔性盒让事情你要容易得多。您可以制作sectiondisplay: flex,并将右侧列的内容全部移动到同一个容器中。 CSS是这样的:

section { 
    display: flex; 
} 

.attempt { 
    width: 15px; 
    background: #3F4E64; 
    margin-right:20px; 
} 

...和HTML:

<section> 
    <div class="attempt">...</div> 
    <div>The rest of the content...</div> 
</section> 

这里是一个demonstration JSFiddle

0

你可以通过设置display:tablesectiondisplay:table-cell两个div的里面(即.attempts DIV和它的兄弟姐妹)实现这一目标。使用这个你不需要设置浮点或高度。

DEMO

CSS:

section { 
    display: table; 
} 
.attempt { 
    display:table-cell; 
    width: 15px;  
    background: #3F4E64; 
    margin-right:20px; 
} 
section div{ 
    display:table-cell; 
}