时间戳

首页 > 解决方案 > 如何确保元素彼此下方

html - 如何确保元素彼此下方

问题描述

我希望图像位于段落上方，但它们不在此代码中。在html中将元素放置在彼此下方是否足够，它们是否会显示在彼此下方？dosplay flex 和 aligning 是否会影响位置，这就是为什么段落不在图像下方的原因？

.wrapper {
  display: flex;
  width: 100%;
}

.div {
  width: 30%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  width: 20%;
  height: 20%;
}
<div class="wrapper">
  <div class="div div1">
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
  </div>
  <div class="div div1">
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>

  </div>
  <div class="div div1">
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
  </div>
</div>

标签： htmlcss

解决方案

order您可以使用该属性对弹性项目强制执行特定顺序。还设置flex-direction为column确保您的元素垂直堆叠。

.wrapper {
  width: 100%;
}

.div {
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  width: 20%;
  height: 20%;
  order: 1;
}

p {
  order: 2;
}
<div class="wrapper">
  <div class="div">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
  </div>
  <div class="div">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
  </div>
  <div class="div">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
  <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
  </div>
</div>

推荐阅读