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

Answer 2

如果我正确理解了这个问题，只需尝试将此 CSS 声明放在父容器上：

white-space: pre-line;

使用此方法，您可以避免将内联块元素转换为块元素。

---

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

我不确定我是否正确理解了这些问题，但我建议查看 CSS 网格(如果适用(。我稍微修改了你的代码笔，以显示它会是什么样子。在指定您只需要一列后，您可以垂直显示元素，在我的示例中，我使用grid-template-column属性将列的宽度设置为auto。

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