gpt4 book ai didi

html - 我怎样才能 "clear"flexbox 元素?

转载 作者:可可西里 更新时间:2023-11-01 12:55:44 26 4
gpt4 key购买 nike

我有这个代码:

.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>

生成类似于下图的内容: the wrong way

我需要它看起来像这样:

enter image description here

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

.caption{flex: 0 1 100%;}

它使标题看起来正确,但正文仍在同一行。此外,右边的 "blah blah" 应该与 some name 在同一行,但我想我可以用绝对位置来解决这个问题。

现在,我的主要问题是“清除 float ”(可以这么说).caption 元素

那么我该如何修复这段代码呢?最好不要更改 html(但如果需要可以这样做)

最佳答案

希望这些代码片段能帮助您了解 flex-boxes 在 css3 中的工作原理以及如何在不使用 float 属性的情况下根据我们的需要排列元素。我为所有元素添加了一些背景颜色,以便更好地理解某些容器的行为是什么。并使用 relative(%) 大小来使其具有一定的响应性。因为它是为了理解目的,希望这能帮助那些在使用 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>

关于html - 我怎样才能 "clear"flexbox 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52487960/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com