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的顺序，那么您可以在没有任何宽度的情况下执行此操作，只需float:right“广告”div和不浮动内容

根据其中一个答案，你不能在IE中的一个未浮动的一个之后浮动一个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是一个浮动清算黑客或什么？）

您也可以使用表格（在政治上不正确，但在旧版浏览器中更容易使用）。让表格百分之百，并且不要为表格单元格指定任何widht。空单元格应使用零空间。（即使长度不同而没有任何复杂的CSS，这将给出两列布局）

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

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

Answer 3

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

让.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。

以下是使用detach()代替hide()进行演示的fiddle（在IE6中使用虚拟机工作）。

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

3 个答案:

Example Fiddle