Question

我正在创建一个基本的引文生成器模型，其中包括两列：一列用于已生成的引文列表，另一列具有用于创建新引文的表单。每个元素都在一个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>

Answer 1

如下所示使用clear:both;

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

Answer 2

这是经过更正的CSS和HTML。

RewriteRule ^/?.well_known/.+$ - [L]

#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;
}

div下div的两列布局

2 个答案: