gpt4 book ai didi

twitter-bootstrap - 根据另一个 Div 保持高度

转载 作者:行者123 更新时间:2023-11-28 15:07:56 24 4
gpt4 key购买 nike

<分区>

.col-6 h1 {
color: white;
text-align: center;
}
h1 {
background-color: red;
}

.COL1, .COL2 {
border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<br></br>
<div class='container'>
<div class='row'>
<div class='col-6 COL1'>
Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.
</div>
<div class='col-6 COL2'>
<h1>ADVERTISE</h1>
<div>Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.</div>
<h1>ADVERTISE</h1>
</div>
</div>
</div>

现在这个 HTML 是这样的错误

enter image description here

但我想要的是让 Lorem ipsum 文本得到 overflow:scroll 以保持 COL2 像这样等于 COL1

enter image description here

如果 Lorem Ipsum 文本太而不会造成溢出,那么它就会得到像这样超越自己

enter image description here

ADVERTISE 保持在 BOTTOM 作为 Max-Height Lorem Ipsum 可以达到。

是否可以在不使用 JS 的情况下使用 BootstrapCSS

附言COL1 没有/不能有固定高度

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