我怎样才能在同一行上获得 3 行文本并且仍然能够定位它们？

Question

制作一个关于页面我试图获得 3 行文本，标题彼此位于同一行，位于带有 background-image 的 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>

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

Css

.managers{
   display: inline-block;
}
.center-us-all{
   text-align: center;
}

你可以使用这个问题使它们具有相同的高度：Side by side divs with same height

Answer 2

一种方法是将第一个项目向左浮动，最后一个项目向右浮动。请注意，您需要清除段落上的浮动。

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

Answer 3

我看到 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

Answer 4

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

Answer 5

我正在用某种 table 包装所有东西。如果您想在提供的 table 单元格内设置边距或以不同方式对齐文本，您可以根据 ID 来计算。我希望这就是您要找的东西，尽管我不认为我已经清楚地了解了您的问题的全貌。如果你想和下面的段落有同样的东西，只需添加另一个 table 行 class 来包装 p。

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-row .column,
.table-row h5 {
  display: table-cell;
  text-align: center;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="table">
      <div class="table-row">
        <div class="one-third column" id="screamer">Some image</div>
        <div class="one-third column" id="kinzu">Other image</div>
        <div class="one-third column" id="swezii">Third image</div>
      </div>
      <div class="table-row">
        <h5 id="manager-1">Screamer</h5>
        <h5 id="manager-2">KINZU</h5>
        <h5 id="manager-3">Swezii</h5>
      </div>
    </div>
    <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>

我怎样才能在同一行上获得 3 行文本并且仍然能够定位它们？

How can I get 3 lines of text on the same line and still be able to position them?

html

css

text

text-alignment

Css