如何将段落显示为水平列表? [英] How to display paragraphs as a horizontal list?
问题描述
我希望我的站点有一个about部分，其中一个(col-1)部分位于其他部分之上.在该部分的下面，有3列描述了我生活的3个方面.
I want my site to have an about section with one (col-1) section above others. And underneath that section, 3 columns which describe 3 aspects of my life.
我尝试了内联块，但无法使其正常工作，但由于它的灵活性，我真的很希望这种方法能够成功.
I tried inline-block and can't get it working, but I would really like this method to succeed because of its flexibility.
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 .
This is what I get: http://prntscr.com/mdwl74. This is what I want to get: http://prntscr.com/mdwkt6.
P.S.我的身体有我的家
P.S. my body has id home
推荐答案
flexbox是一个很好的工具.您只需要一个包装器元素(flexbox-容器).
flexbox is a good tool for this. You only need one wrapper Element (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>这篇关于如何将段落显示为水平列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
