div下div的两列布局

Question

I'm making a basic citation generator mockup with two columns: one for the list of already-generated citations, and one with a form to create a new one. 我正在制作一个基本的引文生成器模型，其中包括两列：一列用于已生成引文的列表，另一列用于创建新引文的表单。 Each element is in a div. 每个元素都在一个div中。 Because the form is shorter in height than the citation list, I'm putting an example image underneath that could be replaced with an advertisment. 由于表单的高度比引文列表的高度短，因此我在下面放置了一个示例图片，该图片可以替换为广告。

However, despite placing the first column (citation list) and second (form and ad) in different divs, the ad stays underneath the citation list: 但是，尽管将第一列（引文列表）和第二列（表格和广告）放在不同的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>

Answer 1

use clear:both; 使用clear:both; as shown below 如下所示

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

Answer 2

Here is the corrected CSS and HTML. 这是更正后的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>

div下div的两列布局

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-10-22 08:45:58

解决方案2
-1 2018-10-22 09:26:16

div下div的两列布局

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-10-22 08:45:58

解决方案2 -1 2018-10-22 09:26:16

解决方案1
0 已采纳 2018-10-22 08:45:58

解决方案2
-1 2018-10-22 09:26:16