Html 如果第二个div为空，如何让浮动div跨越总宽度？

我正在构建一个模板，该模板应包含两种布局：
我有一个容器，上面有a区（左）和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不是一个问题…

您应该清除浮动-但这对于处理您描述的宽度问题应该是可以的。我错过什么了吗

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

---

默认情况下，如果

B

没有内容，则div将为100%无，这使其为0%；如果有内容，它将扩展到内容的大小。但是如果你把最大宽度设置为30%，你会让它消失，没有内容，最大宽度设置为30%

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

---

我试着用CSS来实现我认为你的意思，但没能实现。为了实现我认为您需要的功能，我必须添加一点javascript

编辑： 只需从“div B”中删除内容，然后重新运行fiddle，看看它如何处理任何内容

请参见：

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

它几乎可以在IE7中使用-唯一的问题是“空的right

div

”拒绝隐藏。没有一种纯粹的CSS方法可以解决这一问题，因此我提供了一段jQuery支持的JavaScript来解决这一问题：

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

---

当你说

.right

可以是“空的”时，你是说

中的“完全空的”吗？是的，占位符3和4将完全消失。完全删除

而不仅仅是其中的所有内容是一个选项吗？使用“伪造”等高柱是否可以接受？我有一个纯CSS解决方案，但是如果不使用JavaScript，要在IE7中使用它是很困难的。删除div.right需要一些脚本，但是我不确定删除的条件，所以没有。人造列是可以的。请分享您的解决方案，即使它不适用于IE7thx phil。但要么我不明白，要么我没说清楚。我再试一次。我试图通过浮动A:

.left{float:left；}

来创建列，但如果不同时声明宽度，则此操作无效。我不知道，这取决于B是否为空。如果我在标记中将B放在A之前：

ba

和float B而不是A，也给B一个宽度：

。right{float:right；width:100px；}

它们在清空和填充B时表现得很好，除了它们对我的清除的抵制：A一直在B周围浮动。似乎我在表达自己时遇到了一些问题。是的，你的想法是：）我仍然在寻找一个css唯一的解决方案。但是你的剧本肯定会成功的，谢谢。

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

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

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