整个div的标题对齐[响应]

时间：2017-03-01 10:23:16

标签： html css responsive-design

我必须将项目标题对齐跨越div的单行。内容和按钮也一样。 我不能使用Bootstrap，它也应该响应。

预期输出enter image description here 

.flex-container,
        .child-flex {
            padding: 0;
            margin: 0;
            list-style: none;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            justify-content: space-around;
        }

        .flex-item {
            background: tomato;
            padding: 5px;
            width: 30%;
            min-height: 150px;
            margin-top: 10px;
            color: white;
            font-weight: bold;
            font-size: 3em;
            text-align: center;
        }

        .child-flex-items {
            width: 50%;
            min-height: 150px;
            display: flex;
        }

        .flex-center {
            align-items: center;
        }

        .img-container {
            height: 50px;
            width: 50px;
            background: green;
        }

        .item-header {
          display: flex;
        }

        .item-header h8 {
            font-size: 24px;
        }

        .flex-direction-column {
            flex-direction: column;
        }

        .content-item {
            font-size: 14px;
        }

        @media(max-width:767px) {
            .flex-item {
                width: 100%;
            }
        }

        @media(min-width:768px) {
            .flex-item {
                width: 50%;
            }
        }

        @media(min-width:992px) {
            .flex-item {
                width: 50%;
            }
        }

        @media(min-width:1200px) {
            .flex-item {
                width: 32%;
            }
        }
<div class="flex-container">
        <div class="flex-item">
            <div class="child-flex">
                <div class="child-flex-items flex-center">
                    <div class="img-container"></div>
                </div>
                <div class="child-flex-items flex-direction-column">
                    <div class="item-header">
                        <h8>Test Header</h8>
                    </div>
                    <div class="content-item">
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
                    </div>
                    <div class="button-container">
                        <button>Test1</button>
                        <button>Test1</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-item">
            <div class="child-flex">
                <div class="child-flex-items flex-center">
                    <div class="img-container"></div>
                </div>
                <div class="child-flex-items flex-direction-column">
                    <div class="item-header">
                        <h8>Test Header int occaecat cupidatat</h8>
                    </div>
                    <div class="content-item">
                        <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
                    </div>
                    <div class="button-container">
                        <button>Test1</button>
                        <button>Test1</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-item">
            <div class="child-flex-items flex-center">
                <div class="img-container"></div>
            </div>
            <div class="child-flex-items flex-direction-column">
                <div class="item-header">
                    <h8>Int occaecat cupidatat</h8>
                </div>
                <div class="content-item">
                    <p> dit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt </p>
                </div>
                <div class="button-container">
                    <button>Test3</button>
                    <button>Test4</button>
                </div>
            </div>
        </div>
        <div class="flex-item">4</div>
        <div class="flex-item">
            <div class="child-flex-items flex-center">
                <div class="img-container"></div>
            </div>
            <div class="child-flex-items flex-direction-column">
                <div class="item-header">
                    <h8>Ut enim ad minima veniam</h8>
                </div>
                <div class="content-item">
                    <p> voluptatem sequi nesciunt </p>
                </div>
                <div class="button-container">
                    <button>Test6</button>
                    <button>Test7</button>
                </div>
            </div>
        </div>
        <div class="flex-item">6</div>
    </div>

1 个答案:

答案 0 :(得分：1)

我添加了

.child-flex {
  height: 100%;
}

你也在示例中打破了html，虽然第一个块很好，我复制并粘贴了6次。下一步是将按钮粘在底部：

.content-item {
  flex-grow: 1;
}

因此，对于草图，您还需要左对齐文本和按钮：

.content-item, .button-container {
  text-align: left;
}

最后一步，如果您想将图片与其父级中心对齐，则需要添加对齐内容：

.flex-center {
  justify-content: center;
}

和片段：

＆＃13;
＆＃13; 
.flex-container,
.child-flex {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 30%;
  min-height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.child-flex-items {
  width: 50%;
  min-height: 150px;
  display: flex;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.img-container {
  height: 50px;
  width: 50px;
  background: green;
}

.item-header {
  display: flex;
}

.item-header h8 {
  font-size: 24px;
}

.flex-direction-column {
  flex-direction: column;
}

.content-item {
  font-size: 14px;
  text-align: left;
}

@media(max-width:767px) {
  .flex-item {
    width: 100%;
  }
}

@media(min-width:768px) {
  .flex-item {
    width: 50%;
  }
}

@media(min-width:992px) {
  .flex-item {
    width: 50%;
  }
}

@media(min-width:1200px) {
  .flex-item {
    width: 32%;
  }
}

.child-flex {
  height: 100%;
}

.content-item {
  flex-grow: 1;
}

.button-container {
  text-align: left;
}
＆＃13; 
<div class="flex-container">
  <div class="flex-item">
    <div class="child-flex">
      <div class="child-flex-items flex-center">
        <div class="img-container"></div>
      </div>
      <div class="child-flex-items flex-direction-column">
        <div class="item-header">
          <h8>Test Header</h8>
        </div>
        <div class="content-item">
          <p> Lorem ipsum dolor sit a nisi</p>
        </div>
        <div class="button-container">
          <button>Test1</button>
          <button>Test1</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="child-flex">
      <div class="child-flex-items flex-center">
        <div class="img-container"></div>
      </div>
      <div class="child-flex-items flex-direction-column">
        <div class="item-header">
          <h8>Test Header</h8>
        </div>
        <div class="content-item">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
        </div>
        <div class="button-container">
          <button>Test1</button>
          <button>Test1</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="child-flex">
      <div class="child-flex-items flex-center">
        <div class="img-container"></div>
      </div>
      <div class="child-flex-items flex-direction-column">
        <div class="item-header">
          <h8>Test Header</h8>
        </div>
        <div class="content-item">
          <p> Lorem ipsum dolor sit a nisi</p>
        </div>
        <div class="button-container">
          <button>Test1</button>
          <button>Test1</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="child-flex">
      <div class="child-flex-items flex-center">
        <div class="img-container"></div>
      </div>
      <div class="child-flex-items flex-direction-column">
        <div class="item-header">
          <h8>Test Header</h8>
        </div>
        <div class="content-item">
          <p> Lorem ipsum dolor sit a nisi</p>
        </div>
        <div class="button-container">
          <button>Test1</button>
          <button>Test1</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="child-flex">
      <div class="child-flex-items flex-center">
        <div class="img-container"></div>
      </div>
      <div class="child-flex-items flex-direction-column">
        <div class="item-header">
          <h8>Test Header</h8>
        </div>
        <div class="content-item">
          <p> Lorem ipsum dolor sit a nisi</p>
        </div>
        <div class="button-container">
          <button>Test1</button>
          <button>Test1</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="child-flex">
      <div class="child-flex-items flex-center">
        <div class="img-container"></div>
      </div>
      <div class="child-flex-items flex-direction-column">
        <div class="item-header">
          <h8>Test Header</h8>
        </div>
        <div class="content-item">
          <p> Lorem ipsum dolor sit a nisi</p>
        </div>
        <div class="button-container">
          <button>Test1</button>
          <button>Test1</button>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题