css实现:左右两个div高度相同(右边div在js加载内容后高度会变化)

发布网友发布时间：2022-04-06 12:39

我来回答

共2个回答

懂视网时间：2022-04-06 17:00

flexbox是一个从CSS3添加的布局模块，专门用于列和布局，本篇文章就来给大家分享一下如何使用CSS的flex根据内容更改高度。

话不多说，我们直接进入正题~

如何根据flex的内容更改高度

flexbox的一个默认特性是为每列都设置一个高度。

如图所示

2345截图20181124115117.png

有一个属性可以实现高度的变化，就是， align-items: baseline;要应用的部分是指定display：flex的父元素;

我们来看一个具体的例子

代码如下：

HTML

<div class="container">
 <div class="box"><p>文字内容</p></div>
 <div class="box"><p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字</p></div>
 <div class="box"><p>文字内容</p></div>
 <div class="box"><p>文字内容</p></div>
 <div class="box"><p>文字内容</p></div>
</div>

CSS

.container{
 display: flex;
 background: #ccc;
 flex-wrap: wrap;
 align-items: baseline;
}
.box{
 width: 200px;
 margin: 10px;
 background-color: #66b6d5;
}

在浏览器上显示的效果如下：

2345截图20181124133445.png

本篇文章到这里就全部结束了，更多相关精彩内容大家可以关注Gxlcms的CSS3视频教程栏目来进一步的学习!!!

热心网友时间：2022-04-06 14:08

css3 的display：flex可以实现。
demo：
html结构
<div class="flex-box">
<div class="col">
<p>左侧内容</p>
</div>
<div class="col">
<p>右侧内容</p><p>右侧内容</p>
</div>
</div>
样式
<style>
.flex-box {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
color:white;
}
.flex-box>.col{
flex: 1;
padding: 20px;
}
.flex-box>.col:first-child {
background: red;
-webkit-order: 1;
-ms-flex-order: 1;
order: 0;
}
.flex-box >.col:last-child {
background: black;
-webkit-order: 0;
-ms-flex-order: 0;
order: 1;
}
</style>追问不行啊，把你代码放上去，什么东西都没有。内面的内容都没有了