Question

我正在建立一个“满足团队”页面的网站。 “团队”部分有两行，其中包含3组图像，文字位于下方。我希望行对齐一个在另一个下面但是在那一刻我无法实现这一点。这是代码片段 -

//supposing num is defined lol
var timer = setInterval(update, num);
function update() {
  document.getElementById('scoreband').innerHTML = score;
  var style = document.getElementById('bug').style;
    style.left = ((Math.random() * 100) + 1) + "%";
    style.top = ((Math.random() * 100) + 19) + "%";
}

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#team div.row {

	height: 250px;
  width: 100%;
	text-align: center;
	
}

section#team .four {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: 0;
  
	
}

每张图片需要四列吗？它们是否会与显示规则对齐？任何帮助表示赞赏。

Answer 1

Flexbox可以解决问题。

.container {
  margin: auto;
  max-width: 100%;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

section#team .row {
  display: flex;
  margin-bottom: 1em;
}

section#team .row .four {
  text-align: center;
}

<section id="team">
  <div class="container">
    <div class="twelve columns">
      <h4>MEET THE TEAM</h4>
      <div class="row">
        <div class="four columns">
          <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="Meet Tim" style="width:100px;height:100px;">
          <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus
            nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.
          </p>
        </div>
        <div class="four columns">
          <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="Meet Tim" style="width:100px;height:100px;">
          <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus
            nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.
          </p>
        </div>
        <div class="four columns">
          <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="Meet Tim" style="width:100px;height:100px;">
          <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus
            nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p>
        </div>
      </div>

      <div class="row">
        <div class="four columns">
          <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="Meet Tim" style="width:100px;height:100px;">
          <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus
            nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p>
        </div>
        <div class="four columns">
          <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="Meet Tim" style="width:100px;height:100px;">
          <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus
            nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p>
        </div>
        <div class="four columns">
          <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="Meet Tim" style="width:100px;height:100px;">
          <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus
            nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

您可以使用flex来显示您想要的内容：更多信息：https://www.w3schools.com/cssref/css3_pr_flex.asp

Aply将属性设置为要对齐的项目的父容器。

    #team div.row {

    height: 250px;
  width: 100%;
    text-align: center;
    display: flex;

}

将图像和文本对齐

2 个答案: