gpt4 book ai didi

html - 相邻的 div 必须具有相同的高度,响应式调整大小,并且具有内部绝对定位元素

转载 作者:行者123 更新时间:2023-11-28 17:44:51 26 4
gpt4 key购买 nike

正如标题所说。这些相邻的 div 具有相同的高度,随浏览器窗口调整大小,并且这些小图标绝对位于 Angular 落。此解决方案使用 display:table-cell,适用于除 Firefox(图标最终位于页面底部)之外的所有浏览器。我知道这是一个长期存在的 FF 错误,但我找不到更好的方法来使这些 div 保持相同的高度。

<div class="contain">
<div class="text-box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.</span>
</div>
<div class="text-box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.</span>
</div>
</div>

div.contain {
display: table;
margin: 0 auto;
min-width: 200px;
max-width: 1000px;
border-spacing: 20px;
}
.text-box {
display: table-cell;
position: relative;
width: 25%;
background: red;
}
.text-box::before {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 0;
right: 0;
margin-bottom: -10px;
margin-right: -10px;
background: blue;
content: "";
}

http://jsfiddle.net/d24U6/1/

最佳答案

使用 CSS Flexbox。

jsfiddle

代码:

<html>
<head>
<title>Equal Height Demo</title>

<style>

.container,
.content,
.icon { display: flex; }

.content { position: relative; margin-right: 20px; width: 30%; background: #fcc; }
.content:nth-child(2) { background: #cfc; }

.icon { position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; background: #ccf; }

</style>
</head>
<body>

<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="icon"></div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="icon"></div>
</div>
</div>

</body>
</html>

关于html - 相邻的 div 必须具有相同的高度,响应式调整大小,并且具有内部绝对定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23414996/

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