页面上的两个div像列，第一个div填充第二个div后的所有空格

Question

这是html代码：

<div id="wrapper">
<div id="ads">...</div>
<div id="content">...</div>
</div>

我知道如何在页面上放置像列一样的div，但我无法弄清楚是否有可能实现内容div填充广告div之后的所有空间？ 一个明显的解决方案是将ads-div放入content-div，如下面的答案。但是有一个问题。内容div可以包括任何其他html代码，而不仅仅是纯文本。因此，例如，如果我将内部div放置为样式“width：100％”，则100％表示内容div的所有宽度，不注意ads-div。 我想通过保持两个div分开来实现这一点是不可能的。 请参阅演示的屏幕截图：

Answer 1

您可以重新排列元素，以便广告位于内容<div>内。例如，请参阅this JSFiddle：

<div id="wrapper">
    <div id="content">
        <div id="ads">...</div>
        Lorem ipsum ...
    </div>
</div>

使用CSS：

#ads {
    width: 100px;
    height: 200px;
    background-color: red;
    float: right;
}
#content {
    width: 100%;
    height: 100%;
    background-color: yellow;
}

Answer 2

现在浮动页面上的元素无法帮助您实现这一目标，如果您愿意，可以使用display: flex;

Demo

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap {
    display: flex;    
}

.first {
    width: 80%;
    background: #f00;
}

.second {
    width: 20%;
    background: #00f;
}

---

或者，如果您希望支持旧版浏览器，请考虑分别使用display: table;和display: table-cell ...

Demo

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap {
    display: table;    
    width: 100%;
}

.first {
    width: 80%;
    display: table-cell;
    background: #f00;
}

.second {
    width: 20%;
    display: table-cell;
    background: #00f;
}

Answer 3

我试过这个但不是div，但我在我的情况下使用了段落和div。

你也可以尝试这个

<div id="wrapper">
  <div id="content">
  <div id="ads">...</div>
  <p>
  //your content
  </p>
  </div>
</div>

如果您不想使用内联css，请添加

#ads{
float:right
width:200px;
}

检查（http://jsfiddle.net/q8NJk/）

您可以根据需要获得填充或边距

Answer 4

您需要将<div id="ads">放入<div id="content">。

以下是整个代码：

HTML：

<div id="wrapper">
<div id="content"><div id="ads">...</div>
</div>

CSS：

    #content {
           width:600px;
           height:500px;
           background-color:red;
    }

    #ads {
            height: 300px;
            width:100px;
            background-color:blue;
            float:right;
    }

或者只是看看this小提琴。