Question

这是我正在处理的布局。

我对如何正确对齐此类列中的内容没有一致的想法。段落总是移动，列的高度也不满，猜测我错过了什么。以下是我到目前为止https://jsfiddle.net/scmk01jr/。

html, body, .container {
  height: 100%;
}

.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

.height-100 {
  height: 100%;
  display: table-row;
}

Answer 1

Flexbox可能是一个很好的解决方案：

https://jsfiddle.net/6c4agx54/2/

HTML：

<div class="container">
  <div class="col">
    <div>
      <img src="http://placehold.it/80x25" />
      <h6>
        Small Hdr
      </h6>
      <p>
        This is some text below the h6 heading.
      </p>
    </div>
  </div>
  <div class="col">
    <div>
      <img src="http://placehold.it/80x25" />
      <h6>
        Small Hdr
      </h6>
      <p>
        This is some text below the h6 heading.
      </p>
    </div>
  </div>
  <div class="col">
    <div>
      <img src="http://placehold.it/80x25" />
      <h6>
        Small Hdr
      </h6>
      <p>
        This is some text below the h6 heading.
      </p>
    </div>
  </div>
  <div class="col">
    <div>
      <img src="http://placehold.it/80x25" />
      <h6>
        Small Hdr
      </h6>
      <p>
        This is some text below the h6 heading.
      </p>
    </div>
  </div>
</div>

和CSS：

html, body {
  height: 100%;  
}

body {
  margin: 0;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

.container {
  min-height: 100%;
  display: flex;
}

.col {
  width: 20%;
  float: left;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background: #F66A6D;
  display: flex;
  align-items: center;
}

.col:nth-child(even) {
  background: #F9B7B8;
}

h6 {
  font-size: 17px;
  border-bottom: 1px solid #fff;
  margin: 0;
  padding-bottom: 10px;
}

注意：我删除了您添加到小提琴中的框架 - 如果您可以使用纯HTML和CSS执行此操作，您应该能够非常轻松地合并它们，并且这样的vanilla版本可以更好地为社区服务。

正确对齐列中的内容

1 个答案: