我希望我的网站有一个关于部分，其中一个 (col-1) 部分高于其他部分。 在该部分下方，有 3 列描述了我生活的 3 个方面。
我尝试了 inline-block 但无法正常工作，但我真的希望这种方法能够成功，因为它非常灵活。
html
<body>
<section class="about">
<h1>WHO I AM</h1>
<div class="col-1">
<h3>About me</h3>
<p>sometihing
</p>
</div>
<div class="col-3">
<h3>My work</h3>
<p>Something
</p>
</div><br>
<div class="col-3">
<h3>Ambitions</h3>
<p>Something
</p>
</div>
<div class="col-3">
<h3>Accomplishments</h3>
<p>Something
</p>
</div>
</section>
</body>
CSS
.about {
h1 {
text-align: center;
line-height: 200%;
}
p {
line-height: 200%;
}
color: white;
.col-1 {
text-align: center;
margin-right: 20em;
margin-left: 20em;
}
.col-3 {
display: inline-block;
}
}
这是我得到的: http://prntscr.com/mdwl74 . 这就是我想要得到的: http://prntscr.com/mdwkt6 .
附言我的 body 有家
最佳答案
flexbox 是一个很好的工具。你只需要一个包装元素(flexbox-container)。
.flexbox-container {
display: flex;
justify-content: space-between;
flex-flow: row nowrap;
}<body>
<section class="about">
<h1>WHO I AM</h1>
<div class="col-1">
<h3>About me</h3>
<p>sometihing
</p>
</div>
<div class="flexbox-container">
<div class="col-3">
<h3>My work</h3>
<p>Something
</p>
</div>
<div class="col-3">
<h3>Ambitions</h3>
<p>Something
</p>
</div>
<div class="col-3">
<h3>Accomplishments</h3>
<p>Something
</p>
</div>
</div>
</section>
</body>关于html - 如何将段落显示为水平列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54428181/