Question

据我所知，对于这种情况的旧技术只是在我要分离的两个元素之间留一个空白，但是我如何以更优雅和语义的方式做到这一点？

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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声明放在父容器上：

const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home'},
{ path: 'home', component: HomeComponent},
{ path: 'login', component: LoginComponent}
];

使用这种方法可以避免将内联块元素转换为块元素。

pre-line - 此值将导致空格序列折叠为单个空格字符。在需要填充行框的地方以及标记中的新行（或在生成的内容中出现＆＃34; \ a＆＃34;）时会出现换行符。换句话说，它就像正常一样，只是它会尊重明确的换行符。

＆＃13;

white-space: pre-line;

＆＃13;

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

＆＃13;

Answer 3

我不确定我是否正确理解了这些问题，但如果适用，我建议调查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;
 }

清除内联块而不使用它们之间的空div.clear？

3 个答案: