在父div的内容之后直接显示一个新的div？答案

【问题标题】：Display a new div in-line directly after content of parent div?在父div的内容之后直接显示一个新的div？
【发布时间】：2016-08-25 21:57:39
【问题描述】：

我有一个宽度设置为100% 的横幅。然后我将另一个 div 设置为 30px 嵌套在第一个 div 末尾的主 div 中。这个关闭禁止 div 具有关闭图标的背景图像，并且设置了 javascript，因此当用户点击 div 时，整个横幅隐藏。

我想将此关闭栏 div 紧跟在标有横幅的 div 内的文本之后。

应该是这个样子

[这是一个横幅，里面有文字 [X]]

<div id="banner">this is a banner it has text inside of it<div id="close-ban"></div></div>

【问题讨论】：

你有什么 CSS？

标签： html css

【解决方案1】：

您可以为横幅设置向左浮动，为关闭禁令设置向右浮动。像这样：

#banner {
  width: 100%;
  float: left;
}
#close-ban {
  float: right;
}

&lt;div id="banner"&gt;this is a banner it has text inside of it&lt;div id="close-ban"&gt;close&lt;/div&gt;&lt;/div&gt;

或创建一个 100% 宽度的容器，并在其中放入横幅和关闭 div，如下所示：

#container {
  width: 100%;
}
#banner {
  float: left;
}
#close-ban {
  float: right;
}

<div id="container">
<div id="banner">this is a banner it has text inside of it <div id="close-ban">close</div></div>
</div>

【讨论】：

【解决方案2】：

您可以考虑将 close-ban 设为 span 元素而不是 div 元素。这样它将与您的其他 HTML 内联放置： http://www.w3schools.com/css/css_inline-block.asp （span 标签的格式与 inline-block 相同。您也可以在 CSS 中添加 display:inline-block 以进行关闭）

请记住，如果您的文本占据了顶部禁令的宽度，它将使用上述方法将关闭禁令推到下一行。为避免这种情况，您也可以考虑相对于屏幕或横幅定位关闭禁令：http://www.w3schools.com/cssref/pr_class_position.asp

【讨论】：