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

Question

这是我的标记：

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

Fiddle here -- 随意修改和测试

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

Answer 1

@Salman，如果您重新排列两个 div 的顺序，那么您可以在没有任何宽度的情况下执行此操作，只需浮动：右“广告”div 并且不浮动 根据其他答案之一的内容，

您无法在 IE 中的未浮动 div 之后正确浮动 div 以达到相同的效果，而不涉及宽度/边距

添加：这是您更新的示例小提琴：http://jsfiddle.net/clairesuzy/EqYnw/8/

Example Fiddle

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

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

代码：

CSS：

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

HTML：

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

Answer 2

我假设第 1 列是 div.content 的内容，当第二列 (div.adverts) 为空的。

您可以让包装和内容不浮动，并让广告向右浮动。非浮动 div 应使用所有可用空间，并且正确的浮动应使文本环绕其周围。只要广告 div（当不为空时）比内容高，它就会显示为两列。 （我认为清除 div 是浮动清除黑客或其他什么？）

您还可以使用表格（政治上不正确，但更容易使其在旧版浏览器中工作）。让表格的宽度为 100%，并且不为表格单元格指定任何宽度。空单元格应使用零空间。 （即使长度不同，没有任何复杂的 css，这也会给出两列布局）

在任何情况下：为了避免为空元素定义样式导致其可见的错误，请改为设置子元素的样式（如果它们不可见）目前的 css 无论如何都不会应用，如下所示：

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

Answer 3

对于 .advert div 根本不在 HTML 中的情况，您可以使用通用同级选择器 + 。

让 .advert 向右浮动，并将其放在 HTML 中的 .content div 之前（对于 CSS 选择器）

<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 div 存在。

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

这不能与 show() 和 hide() 动态配合使用。如果您动态需要，则必须从 DOM 中删除 .advert。

这是一个 fiddle ，其中使用 detach() 而不是 进行了演示>hide()（在 IE6 中的虚拟机上工作）。