css - 页面上的两个 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 代码，而不仅仅是纯文本。因此，例如，如果我放置样式为“width:100%”的内部 div，100% 表示内容 div 的所有宽度，它不注意 ads-div。我想通过将两个 div 分开来实现这一点是不可能的。请看演示截图：

Answer 1

您可以重新排列您的元素，使广告在内容内<div>。例如，请参阅此 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;

演示

* {
    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...

演示

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

或者看看这个小提琴。