制作一个关于页面我试图获得3行文本，标题在彼此相同的行上，正好在带有背景图像的CSS圈下面。在下面我有一些文本需要在相应的昵称下。我不知道如何让文本在中心间隔均匀。保证金似乎不起作用。如果有可能，让我知道如何做到这一点。我一直在寻找几个小时的答案，无论是在这个网站还是其他多个网站，但都找不到答案。所以我想我的问题是：如何才能在同一行上获得3行文字并仍然可以定位？
这是我的代码。请记住，我正在使用骨架响应网格系统。
#importantpeople {
text-align: center;
}
#manager-1 {
font-weight: 500;
text-align: left;
margin-left: -2px;
}
#manager-2 {
font-weight: 500;
text-align: center;
}
#manager-3 {
font-weight: 500;
text-align: right;
margin-right: 10px;
}<div class="container">
<div class="row" id="importantpeople">
<h4 id="managers-head">Our Managers</h4>
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
<h5 id="manager-1">Screamer</h5>
<h5 id="manager-2">KINZU</h5>
<h5 id="manager-3">Swezii</h5>
<p>Just a guy chilling on his computer creating works of art for people</p>
<p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
<p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
</div>
答案 0 :(得分：1)
如果您希望标题和段落在同一行，则必须使用内联显示。但我想我已经知道你有什么问题这样做： 你需要将每个及其描述放在同一个div中
<div id="manager-1div" class="managers">
<h5 id="manager-1">Screamer</h5>
<p>Just a guy chilling on his computer creating works of art for people</p></div>
<div id="manager-2div" class="managers">
<h5 id="manager-2" class="center-us-all">KINZU</h5>
<p class="center-us-all">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
</div>
<div id="manager-3div" class="managers">
<h5 id="manager-3" class="center-us-all">Swezii</h5>
<p class="center-us-all">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
.managers{
display: inline-block;
}
.center-us-all{
text-align: center;
}
您可以使用以下问题将它们设置为相同的高度：Side by side divs with same height
答案 1 :(得分：1)
一种方法是将第一个项目向左浮动，将最后一个项目向右浮动。请注意，您需要清除段落上的浮动。
#importantpeople {
text-align: center;
}
#manager-1 {
font-weight: 500;
text-align: left;
margin-left: -2px;
float: left;
}
#manager-2 {
font-weight: 500;
text-align: center;
}
#manager-3 {
font-weight: 500;
text-align: right;
margin-right: 10px;
float: right;
}
p {
clear: both;
}
h5 {
margin: 0;
}<div class="container">
<div class="row" id="importantpeople">
<h4 id="managers-head">Our Managers</h4>
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
<h5 id="manager-1">Screamer</h5>
<h5 id="manager-3">Swezii</h5>
<h5 id="manager-2">KINZU</h5>
<p>Just a guy chilling on his computer creating works of art for people</p>
<p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
<p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
</div>
答案 2 :(得分：1)
我看到类似Bootstrap的类。为什么不使用可用的网格？由于.one-third.column课程的原因，我猜你实际上并没有使用Bootstrap，但是这里应该如何在你正在使用的网格中完成。
<div class="row">
<div class="col-xs-4 text-left">
<div class="one-third.column" id="screamer"></div>
<h5 id="manager-1">Screamer</h5>
</div>
<div class="col-xs-4 text-center">
<div class="one-third.column" id="kinzu"></div>
<h5 id="manager-2">KINZU</h5>
</div>
<div class="col-xs-4 text-right">
<div class="one-third.column" id="swezii"></div>
<h5 id="manager-3">Swezii</h5>
</div>
</div>
<强> Demo
答案 3 :(得分：1)
使用display: inline-block;
#importantpeople {
text-align: center;
}
.inline-block{
display: inline-block;
width: 32%
}
#manager-1 {
font-weight: 500;
text-align: left;
margin-left: -2px;
}
#manager-2 {
font-weight: 500;
text-align: center;
}
#manager-3 {
font-weight: 500;
text-align: right;
margin-right: 10px;
}<div class="container">
<div class="row" id="importantpeople">
<h4 id="managers-head">Our Managers</h4>
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
<h5 id="manager-1" class="inline-block">Screamer</h5>
<h5 id="manager-2" class="inline-block">KINZU</h5>
<h5 id="manager-3" class="inline-block">Swezii</h5>
<p>Just a guy chilling on his computer creating works of art for people</p>
<p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
<p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
</div>
答案 4 :(得分：0)
我把所有东西都包裹在某种桌子里。如果要在提供的表格单元格中设置边距或对齐文本，可以根据ID后面的内容进行处理。我希望这是你所寻找的，虽然我不认为我已经清楚地了解了你的问题。 如果你想在下面的段落中使用相同的内容，只需添加另一个表行类来包装p＆＃39; s。
constructor(int, int);
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
width: 100%;
}
.table-row .column,
.table-row h5 {
display: table-cell;
text-align: center;
}