Question

我正在尝试对齐一组文本，包括p和h5 html元素。我使用内联块显示类型来使文本在标题的同一行。如果无法与此显示类型对齐，那么如果您可以在同一行上提供3种标题的替代方式将会很有帮助。这是我的代码：

＆＃13;

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}
/* For devices larger than 400px */

@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}
/* For devices larger than 550px */

@media (min-width: 550px) {
  .container {
    width: 80%;
  }
  .column,
  .columns {
    margin-left: 4%;
  }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }
  .one-third.column {
    width: 30.6666666667%;
  }
  #importantpeople {
    text-align: center;
  }
  #manager-1 {
    font-weight: 500;
    text-align: left;
    margin-left: -2px;
    display: inline-block;
    text-align: left;
  }
  #manager-2 {
    font-weight: 500;
    text-align: center;
    display: inline-block;
    text-align: center;
  }
  #manager-3 {
    font-weight: 500;
    text-align: right;
    margin-right: 10px;
    display: inline-block;
    text-align: right;
  }

＆＃13;

<div class="container">
  <div class="row">
    <div id="seven columns" id="seven-cols">
      <h4 id="aboutus">About Us</h4>
      <p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our clients.
        If you want to be apart of this movement then sign up now!</p>
    </div>
  </div>
</div>

<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>

＆＃13;

所以我的问题是如何将#screamer左对齐，#kinzu与中心对齐，#swezii在右侧对齐？

Answer 1

将边距更改为20％，并将其设置的方向反转，确保使用％not px作为边距。

#manager-1 {
    font-weight: 500;
    text-align: left;
    margin-right: 20%;
    display: inline-block;
    text-align: left;
  }
#manager-2 {
    font-weight: 500;
    text-align: center;
    display: inline-block;
    text-align: center;
  }
#manager-3 {
  font-weight: 500;
  text-align: right;
  margin-left: 20%;
  display: inline-block;
  text-align: right;
  }

Answer 2

问题是您的班级one-third.column有一段时间，当您在CSS中设置样式时，这可能会导致一些问题。即使您通过执行以下操作来逃避这段时间：one-third\.column它仍然可能导致浏览器兼容性问题。我将类名更改为one-third-column并为其提供了以下CSS规则：

.one-third-column {
    width: 30.6666666667%;
    display: inline-block;
  }

这是一个JSFiddle，它提供了一个适当地对齐列的解决方案。 http://jsfiddle.net/hr1bb64n/1/

Answer 3

对＃manager-1使用 float：left ，对＃manager-3使用 float：right 。当 KINZU 位于中心位置时，这会将 Screamer 拉向左侧，将 Swezii 拉向右侧。

#manager-1 {
    font-weight: 500;
    float: left;
    margin-left: -2px;
    display: inline-block;
    text-align: left;
}

#manager-2 {
    font-weight: 500;
    text-align: center;
    display: inline-block;
    text-align: center;
}

#manager-3 {
    font-weight: 500;
    float: right;
    margin-right: 10px;
    display: inline-block;
    text-align: right;
}

对齐内联块Div中的文本？ CSS

3 个答案: