时间戳

首页 > 解决方案 > 如何“清除”弹性框项目？

html - 如何“清除”弹性框项目？

问题描述

我有这个代码：

.userInfo h2 {
  color: #012850;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2.6875rem;
}

.time {
  color: #2966A3;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.375rem;
}

.textzone .caption p {
  font-size: 1.25rem;
}

.iconsZone {
  margin-top: 29px;
  display: flex;
  height: 60px;
  flex-direction: row;
  order: 1;
  align-content: flex-end;
  align-self: end;
}

.textzone .caption {
  order: 3;
}

.adHead {
  display: flex;
  order: 2;
}

.profile-img img {
  margin-right: 25px;
  width: 150px;
  height: auto;
}
<div class="textzone">
  <div class="adHead">
    <div class="profile-img">
      <img src="images/avatar.png" alt="">
    </div>
    <div class="userInfo">
      <h2>Some Name</h2>
      <p class="time">05:55 PM</p>
    </div>
    <div class="caption">
      <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
    </div>
  </div>

  <div class="iconsZone">
    <div class="comments iconBox">
      blah!
    </div>
    <div class="likes iconBox">
      blah blah!
    </div>
  </div>
</div>

它会生成类似下图的内容： 错误的方法

我需要它看起来像这样：

在此处输入图像描述

所以我基本上差不多有了，但不知道如何让标题和正文出现在不同的行上。我试过了

.caption{flex: 0 1 100%;}

它使标题看起来正确，但正文仍然在同一行。另外，右边的“blah blah”应该和某个名字在同一行，但我想我可以用绝对位置来解决这个问题。

现在，我的主要问题是“清除浮动”（可以这么说）.caption元素

那么我应该如何修复这段代码呢？最好不要更改html（但如果需要可以这样做）

标签： htmlcssflexbox

解决方案

希望这些代码片段能帮助您了解 flex-boxes 在 css3 中是如何工作的，以及如何在不使用 float 属性的情况下根据我们的需要排列项目。我为所有元素添加了一些背景颜色，以便更好地理解某些容器的行为。并使用相对（％）大小使其有点响应。因为它是为了理解的目的，希望这将帮助任何与 flex 排列的 CSS 元素斗争的人。不幸的是，不得不更改您的 HTML 基础以使其按您的要求工作。

*, body{
    box-sizing: border-box;
}
.textzone{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
    background-color: yellow;
}
.profile-img{
    display: flex;
    width: 30%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.profile-img img{
    width: 80%;
    height: 80%;
}
.adHead{
    display: flex;
    width: 70%;
    flex-wrap: wrap;
    background-color: red;
    flex-direction: column;
}
.title-container{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: brown; 
}
.userInfo{
    display: flex;
    width: 70%;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: tomato; 
}
.userInfo h2 {
  color: #012850;
  font-size: 2rem;
  font-weight: 800;
  line-height: 2.6875rem;
  margin: 0; /* to remove the margin sets by default */
}
.time {
  color: #2966A3;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.375rem;
  margin: 0;
}
.textzone .caption p {
  font-size: 1.25rem;
}
.iconsZone{
    display: flex;
    width: 30%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    background-color: orange;
}
.comments-iconBox{
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5%;
    background-color: skyblue;
}
.likes-iconBox{
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5%;
    background-color: aqua;
}
.caption{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    background-color: gray;
}
    <div class="textzone">
        <div class="profile-img">
            <img src="icon2.png" alt="">
        </div>
        <div class="adHead">
            <div class="title-container">
                <div class="userInfo">
                    <h2>Some Name</h2>
                    <p class="time">05:55 PM</p>
                </div>
                <div class="iconsZone">
                    <div class="comments-iconBox">
                        blah!
                    </div>
                    <div class="likes-iconBox">
                        blah blah!
                    </div>
                </div>
            </div>
            <div class="caption">
                <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Corrupti architecto dicta ab, vero minima nesciunt fugiat 
                    perspiciatis nobis eveniet suscipit nostrum, dolore quos molestiae at, 
                    officiis fugit id sit officia? Sed ut perspiciatis, unde omnis iste natus error 
                    sit voluptatem accusantium doloremque laudantium
                </p>
            </div>
        </div> 
    </div>

推荐阅读