div 在两列布局中的 div 下

我正在制作一个包含两列的基本引文生成器模型：一列用于已生成的引文列表，另一列用于创建新引文的表单。每个元素都在一个div 中。由于表单的高度比引文列表短，因此我在下面放置了一个示例图像，可以用广告替换。

但是，尽管将第一列(引文列表(和第二列(表单和广告(放在不同的div 中，广告仍保留在引文列表下方：

#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
#citationList {
display: inline-block;
float: left;
margin-left: 15%;
width: 30%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
margin-right: 15%;
width: 30%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm form label {
float: left;
}
#creationForm form input .textBox {
float: right;
}
#adSpace {
float: right;
}

<html>
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="col-sm">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
<li>Citations are listed here</li>
<li>This can be however long</li>
</ul>
</div>
</div>
<div class="col-sm">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<label for="someInput">Some input:</label>
<input id="someInput" type="text" class="textBox" />
<label for="moreInput">More input:</label>
<input id="moreInput" type="text" class="textBox" />
<label for="evenMoreInput">Even more input:</label>
<input id="evenMoreInput" type="text" class="textBox" />
<label for="muchMoreInput">Much more input:</label>
<input id="muchMoreInput" type="text" class="textBox" />
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</body>
</html>

使用如下所示的clear:both;

#adSpace {
float: right;
clear: both;
}

这是更正的 CSS 和 HTML。

#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
.contentContainer {
width:1200px;
margin:0 auto;
display: inline-block;
}
#citationList {
display: inline-block;
float: left;
width: 100%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
width: 100%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
.row {
margin:10px -15px;
}
#creationForm form label {
float: left;
width: 30%;
}
#creationForm form input.textBox {
float: left;
}
#adSpace {
float: left;
}

<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="contentContainer">
	    <div class="col-md-6 col-sm-6">
	      <div id="citationList">
	        <h4>Your Citations</h4>
	        <ul id="citations">
	          Looks like you don't have any citations made yet!
	        </ul>
	      </div>
	    </div>
	    <div class="col-md-6 col-sm-6">
	      <div id="creationForm">
	        <h4>Create a Citation</h4>
	        <form>
	          <!-- Author -->
	          <div class="row">
		          <label for="authorFirst">Author's first name:</label>
		          <input id="authorFirst" type="text" class="textBox" />
	          </div>
	          <div class="row">
		          <label for="authorLast">Author's last name:</label>
		          <input id="authorLast" type="text" class="textBox" />
	          </div>
	          <br />
	          <!-- Website -->
	          <div class="row">
		          <label for="pageTitle">Title of page/article:</label>
		          <input id="pageTitle" type="text" class="textBox" />
		      </div>
	          <div class="row">
		          <label for="siteTitle">Title of website:</label>
		          <input id="siteTitle" type="text" class="textBox" />
		      </div>
	          <br />
	          <!-- Dates -->
	          <div class="row">
		          <label for="datePublished">Date published:</label>
		          <input id="datePublished" type="text" class="textBox" />
		      </div>
	          <div class="row">
		          <label for="dateAccessed">Date accessed:</label>
		          <input id="dateAccessed" type="text" class="textBox" />
		      </div>
	        </form>
	      </div>
	      <div id="adSpace">
	        <img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
	        <p>Advertisment</p>
	      </div>
	    </div>
</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：