时间戳

首页 > 解决方案 > 使 flexbox 文本水平到其他容器？

html - 使 flexbox 文本水平到其他容器？

问题描述

我有三个 flexbox 容器，其中包含不同数量的文本和位于顶部的背景图像。我试图使文本和图像的顶部水平，但它不断向上推。如何使文本向下流动并保持水平？我不想设置最大高度，因为每个网页上的文本数量都会不同，并且会有太多的空白。谢谢。

body {
  width: 1200px;
}

.box {
  display: flex;
  flex-flow: column row;
  padding: 0px;
  flex-wrap: nowrap;
  color: black;
  justify-content: space-between;
}

.box1 {
  width: 300px;
  min-height: 150px;
  margin: auto;
  color: black;
  background: url("http://via.placeholder.com/350x150");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 97% 0%;
  order: 1;
}

.box2 {
  width: 300px;
  min-height: 150px;
  margin: auto;
  background: url("http://via.placeholder.com/350x150");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 97% 0%;
  order: 2;
}

.box3 {
  width: 300px;
  min-height: 150px;
  margin: auto;
  background: url("http://via.placeholder.com/350x150");
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 97% 0%;
  order: 3;
}

.box ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.box li {
  text-align: left;
  position: relative;
  right: 30px;
  top: 2px
}
<div class="box">
  <div class="box1">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
  <div class="box2">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
  <div class="box3">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
</div>

标签： htmlcss

解决方案

你的 div 不对齐的原因是margin: auto在盒子上。

将边距设置为 0，margin: auto如果不需要，则将其删除。

.box > div {
  margin-top: 0;
}

请参阅此参考： https ://jsfiddle.net/d2LgLvx2/

推荐阅读