我正在尝试实现这种布局,它是 3 列,它们之间有空格,每列都有一个标题和段落:
我该如何解决?(尤其是标题部分)
这是我的 html:
* {
box-sizing: border-box;
}
.wrapper {
padding: 5px;
max-width: 960px;
width: 95%;
margin: 20px auto;
}
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}
.column {
flex: 1;
border: 1px solid gray;
margin: 2px;
padding: 10px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
h2 {
padding: 0px;
border-style: solid;
border-width: thin;
text-align: center;
background-color: #e4e4e4
}
<div class="wrapper">
<section class="columns">
<div class="column">
<h2>Cupcakes</h2>
<p>----</p>
</div>
<div class="column">
<h2>Join our team</h2>
<p>-----
<p>
</div>
<div class="column">
<h2>About us</h2>
<p>---</p>
</div>
</section>
</div>
margin
标题上应该为零以避免它们与容器之间出现空间,但可以将边距应用于p
标签(和其他内容标签)。border
应该只在标题的底部以避免双边框。其他细节见下面的片段。顺便说一句:嵌套 CSS 在这里的片段中不起作用,为此您需要 LESS 或 SASS。
* {
box-sizing: border-box;
}
.wrapper {
padding: 5px;
max-width: 960px;
width: 95%;
margin: 20px auto;
}
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}
.column>p {
padding: 10px;
}
.column:first-child {
margin-right: 15px;
}
.column:last-child {
margin-left: 30px;
}
.column {
flex: 1;
border: 1px solid gray;
margin: 2px;
padding: 0px;
}
h2 {
padding: 5px 0px 3px;
border-bottom: 1px solid gray;
text-align: center;
background-color: #e4e4e4;
margin: 0;
}
<div class="wrapper">
<section class="columns">
<div class="column">
<h2>Cupcakes</h2>
<p>----</p>
</div>
<div class="column">
<h2>Join our team</h2>
<p>-----
<p>
</div>
<div class="column">
<h2>About us</h2>
<p>---</p>
</div>
</section>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句