Css 当第2列不存在时，将第1列扩展到最大宽度

这是我的标记：

<div class="wrapper">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, gravida quis eleifend at, vestibulum at nibh. Nunc faucibus pellentesque nunc, vitae ultricies nibh interdum eu. Proin a est sed eros suscipit pretium ac sit amet tortor.</p>
        <p>Vivamus feugiat, neque non tincidunt iaculis, dolor ipsum convallis libero, condimentum malesuada leo nulla a turpis. Praesent sed metus ipsum. Cras semper condimentum mauris. Nulla eleifend blandit facilisis. Phasellus gravida tempus eros, molestie cursus nisi imperdiet non. Donec dapibus.</p>
    </div>
    <div class="adverts"></div>
    <div class="clear"></div>
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。同侧前庭，胎儿前庭，胎儿前庭。Nunc faucibus pellentesque Nunc，ultricies nibh interdum eu。这是一个最严重的侵权行为

feugiat Vivamus，neque non tincidunt iaculis，dolor ipsum convallis libero，malesuada leo nulla a turpis调味品。同侧前方。克拉斯·森佩尔调味品莫里斯。无电气设备。怀孕的时候，性欲的时候，性骚扰的时候。多奈克·达皮布斯

--可以随意修改和测试

---

我想要一个CSS解决方案，使内容宽度等于最大可用宽度或最大可用宽度-120px，这取决于广告div是否存在。div是否存在取决于页面是否应该显示广告。解决方案必须适用于旧版本的IE。

我假设第1列是

div.content

的内容，至少有两种方法可以在第二列（

div.advists

）为空时使用最大可用空间

您可以让包装器和内容不浮动，让广告向右浮动。非浮动div应该使用所有可用空间，右浮动应该使文本环绕它。只要广告div（非空时）高于内容，它就会显示为两列。（我假设clear div是一个浮动清算黑客还是什么？）

您还可以使用一个表（在政治上不正确，但在较旧的浏览器中更容易使用）。让表格为100%宽度，不要为表格单元格指定任何宽度。空单元格应使用零空间。（这将提供两列布局，即使长度不同，但没有任何复杂的css）

在任何情况下：为了避免为空元素定义样式导致其可见的错误，请改为为为子元素设置样式，如果子元素不存在，css将不会应用，如下所示：

/*gives all direct subchild divs 300px widht*/
.adverts>div{ width: 300px; } 

---

对于

.advert

div根本不在HTML中的情况，可以使用常规同级选择器

+

让

.advert

向右浮动，并将其放在HTML中

.content

div之前（用于CSS选择器）

这不会在

show（）

和

hide（）

中动态工作。如果动态地需要，则必须从DOM中删除

.advert

---

下面是一个演示，使用

detach（）

而不是

hide（）

（在IE6中的一个VM上工作）。

@Salman，如果您重新排列两个div的顺序，那么您可以不使用任何宽度来执行此操作，您只需

浮动：右
广告”div和不浮动内容

根据另一个答案，在IE中，如果不涉及宽度/边距，则不能在未浮动的div之后右浮动div，以实现相同的效果

补充：以下是您的小提琴更新示例：

jQuery只是切换实际的ad元素，以显示如果adverts div中没有内容，它将崩溃，代码中解释了溢出用法

我不确定您的“notpresent”div是否是实际的“adverts”div或其中的元素，但这应该适用于两者，因为内容将默认为剩余内容的100%

信息代码：

CSS:

HTML:


.
Lorem ipsum dolor sit amet，是一位杰出的献身者。同侧前庭，胎儿前庭，胎儿前庭。Nunc faucibus pellentesque Nunc，ultricies nibh interdum eu。这是一个最严重的侵权行为

feugiat Vivamus，neque non tincidunt iaculis，dolor ipsum convallis libero，malesuada leo nulla a turpis调味品。同侧前方。克拉斯·森佩尔调味品莫里斯。无电气设备。怀孕的时候，性欲的时候，性骚扰的时候。多奈克·达皮布斯

显示隐藏广告
最后一句话粉碎了我用flexbox回答问题的希望=（您能更改上面的HTML吗？您介意更改
.content
和
.adverts
的源代码顺序吗can@clairesuzy：重新安排两个div是可能的。我很惊讶
+
操作符在IE6中工作。有没有可能通过内联样式实现同样的效果？没有，我看不到解决方案但是如果你能在服务器端添加广告或者不添加广告，为什么不在这一点上在页面中添加额外的css呢？我会以
的内容结束吗？content
会以
L
的形式流动吗？不，这就是
上的
溢出：hidden
阻止的。如果你想要ode>L
shape然后从
中删除
overflow
和
zoom
属性。content
CSS不管两个div的高度如何，这两列的行为都像列，这正是我想要的！
<div class="wrapper">
    <div class="adverts"></div>
    <div class="content"></div>
</div>


.content
{
    float: left;
    width: auto;
    background-color: cyan;
}
.adverts
{
    float: right;
    width: 120px;
    height: 600px;
    background-color: lime;
}

.adverts + .content {
    width: 130px;
}

html, body {margin: 0; padding: 0;}

.wrapper {
    overflow: hidden;/* Makes wrapper contain its floated children */
    zoom: 1; /* Makes wrapper contain its floated children in IE6 and below */
    border: 1px solid #666;
    background: #ddd;

}
.content {
    border: 1px solid #000;
    background: #fff;
    overflow: hidden; /* to not wrap under adverts if content is longer  - optional if you want the wrap */
    zoom: 1; /* equivalent of overflow for IE6 and below */ 
}

.adverts {
    float: right;
    border: 1px solid #00c;
}

/* put any widths on the actual advert element */
.ad-element {width: 200px; height: 30px; background: #0f0;}

<div class="wrapper">    

   <div class="adverts"><div class="ad-element">.</div></div>
   
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, gravida quis eleifend at, vestibulum at nibh. Nunc faucibus pellentesque nunc, vitae ultricies nibh interdum eu. Proin a est sed eros suscipit pretium ac sit amet tortor.</p>
        <p>Vivamus feugiat, neque non tincidunt iaculis, dolor ipsum convallis libero, condimentum malesuada leo nulla a turpis. Praesent sed metus ipsum. Cras semper condimentum mauris. Nulla eleifend blandit facilisis. Phasellus gravida tempus eros, molestie cursus nisi imperdiet non. Donec dapibus.</p>
    <button>Show hide ads div</button>
    </div>

</div>