Question

我正在构建一个应该容纳两种布局的模板：
我有一个容器有div A（左）和div B（右）。 A始终满足。如果B有内容，它的宽度应该是30％，A得到其余的。两个柱子应该具有100％的高度，不会在较短的元件周围浮动如果B为空，则根本不显示，A应占宽度的100％。

<div class="container">
  <div class="left">
    <placeholder 1 />
    <placeholder 2 />
  </div>
  <div class="right"><!-- can be empty -->
    <placeholder 3 />
    <placeholder 4 />  
  </div>
</div>

我很想用css做到这一点。可能吗？或者我是否需要使用javascript？ IE6不是问题......

Answer 1

默认情况下，如果B没有内容，则div将为100％无效，这使其为0％;如果有内容，它将扩展到内容的大小。但是，如果你将最大宽度设置为30％，那么你将无任何内容消失，最高可达30％。

B.div {
    max-width:30%;
}

Answer 2

我尝试用CSS完成我认为你的意思，但是无法完成它。为了实现我认为你需要的东西，我不得不添加一些javascript。

编辑：只需从'div B'中删除内容并重新运行小提琴，看看它如何处理没有内容。

http://jsfiddle.net/QrNu7/21/

Answer 3

你应该清除你的花车 - 但这对于处理你描述的宽度问题应该没问题。我错过了什么吗？

 <div class="container">
      <div class="left">
        <placeholder 1 />
        <placeholder 2 />
      </div>
      <div class="right"><!-- can be empty -->
        <placeholder 3 />
        <placeholder 4 />  
      </div>
      <div class="clear"></div>
    </div>

样式表中的

.clear
{
clear:both;
}

Answer 4

请参阅： http://jsfiddle.net/3mDnr/

适用于IE8 +和所有现代浏览器。

几乎在IE7中运行 - 唯一的问题是“空右div”拒绝隐藏。只是没有一种纯粹的CSS方法来修复它，所以我已经包含了一段jQuery驱动的JavaScript来实现它：

<!--[if lte IE 7]>
<script>
$(function() {
    $('.right:empty').hide();
});
</script>
<![endif]-->

您可以使用faux columns technique 伪造相等高度的列。

<强> HTML：

<div class="container">
    <div class="right">..</div>
    <div class="left">
        ..
    </div>
</div>

<强> CSS：

.container {
    overflow: hidden
}
.left {
    overflow: hidden;
    background: #ccc;
}
.right {
    float: right;
    width: 30%;
    background: cyan
}

如果第二个div是空的，如何让浮动div跨度总宽度？

4 个答案: