Очистить inline-блоки без использования пустого div.clear между ними?

Question

Я понимаю, что более старая техника для такой ситуации заключалась бы в том, чтобы просто поставить пробел между двумя элементами, которые я хочу разделить, но как бы я сделал это более изящным и семантическим способом?

https://codepen.io/sharpdesigner/pen/oywgeo

body {
  font-family: arial;
  text-align: center;
}
.block-container {
  text-align: center;
  margin: 30px auto;
}
.block-1 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;
}
.block-2 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;
}

<h3>How do you get these two blocks to display stacked vertically instead of on the same line, without using a div.clear?</h3>

<div class="block-container">
  <a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
  <a class="block-2" href="" title="">a.block-2</a>
</div>

Answer 1

Я не уверен, что правильно понял вопросы, но я предлагаю изучить CSS-сетку, если это применимо. Я немного изменил код вашего пера, чтобы показать, как это будет выглядеть. Вы можете отображать элементы по вертикали, указав, что вам нужен только один столбец, в моем примере я установил ширину столбца на auto с использованием grid-template-column приписывать.

.block-container {
    text-align: center;
    margin: 30px auto;
    display:grid;

    /*by specifying that there is only one column, this should create vertical alignment.*/ 
    grid-template-column: auto;
 }

.block-1 {
    border: 1px solid #ccc;
    width: auto;
    padding: 20px;
    margin: 0 auto 30px;
    display: inline-block;
 }

.block-2 {
    border: 1px solid #ccc;
    width: auto;
    padding: 20px;
    margin: 0 auto 30px;
    display: inline-block;
 }

Answer 2

Если я правильно понял проблему, попробуйте поместить это объявление CSS в родительский контейнер:

white-space: pre-line;

При таком подходе вы избегаете преобразования элементов inline-block в элементы block.

---

pre-line - Это значение приведет к тому, что последовательности пробелов будут объединены в один символ пробела. Разрывы строк будут происходить везде, где необходимо заполнить строчные блоки, и на новых строках разметки (или при появлении "\a" в сгенерированном содержимом). Другими словами, это как обычно, за исключением того, что оно учитывает явные разрывы строк.

body {
  font-family: arial;
  text-align: center;
}
.block-container {
  text-align: center;
  margin: 30px auto;
  white-space: pre-line;

}
.block-1 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;
}
.block-2 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;

}

<h3>How do you get these two blocks to display stacked vertically instead of on the same line, without using a div.clear?</h3>

<div class="block-container">
  <a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
  <a class="block-2" href="" title="">a.block-2</a>
</div>

Answer 3

Вы можете сделать это используя flex

.block-container {
  max-width: 1250px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

 
body {
  font-family: arial;
  text-align: center;
}
.block-container {
  max-width: 1250px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.block-1 {
  border: 1px solid #ccc;
  width: 500px;
  padding: 20px;
  display: inline-block;
  margin-bottom: 20px;
}
.block-2 {
  border: 1px solid #ccc;
  width: 200px;
  padding: 20px;
  display: inline-block;
}

<h3>How do you get these two blocks to display stacked instead of on the same line, without using a div.clear?</h3>

<div class="block-container">
  <a class="block-1" href="" title="">a.block-1</a>
  <a class="block-2" href="" title="">a.block-2</a>
</div>

2-й ответ Сделать элемент block2 display: block

 
body {
  font-family: arial;
  text-align: center;
}
.block-container {
  text-align: center;
  margin: 30px auto;
}
.block-1 {
  border: 1px solid #ccc;
  width: auto;
  padding: 20px;
  margin: 0 auto 30px;
  display: inline-block;
}
.block-2 {
  border: 1px solid #ccc;
  width: 200px;
  padding: 20px;
  margin: 0 auto 30px;
  display: block;
}

<h3>How do you get these two blocks to display stacked instead of on the same line, without using a div.clear?</h3>

<div class="block-container">
  <a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
  <a class="block-2" href="" title="">a.block-2</a>
</div>