css - 清除内联 block 而不在它们之间使用空的 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

你可以使用 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>

第二个答案使 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>