div под div в двухколоночном макете

Question

Я делаю базовый макет генератора цитирования с двумя столбцами: один для списка уже сгенерированных цитат, а другой с формой для создания нового. Каждый элемент находится в 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>

html css alignment

0

Theo C 22 Окт 2018 в 11:34

Answer 1

Используйте clear:both;, как показано ниже

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

0

Vikas Jadhav 22 Окт 2018 в 08:45

Answer 2

Вот исправленные 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>

-1

Ashok Chauhan 22 Окт 2018 в 09:26

div под div в двухколоночном макете

2 ответа

Похожие вопросы

Новые вопросы

html