我有一个如下所示的 html 片段:
<div class="outer" style="min-width: 150px;">
<div class="inner1">
<span>Lorem ipsum dolor sit amet</span> // Can be very long, truncate as needed
<div class="inner2"/>
</div>
外部 div 具有最小宽度,并且可以/将会增长。我想要的是外部 div 的宽度随着 inner2 的增长而增长,而不是 inner1。也就是说,我想让外层div的宽度由inner2决定,就好像inner1不存在,然后加上inner1,让宽度不变,例如
如果 inner2 的宽度小于 150px,则 inner1 的宽度将为 150px。
如果inner2的宽度大于150px,那么inner1的宽度会和inner2的div一样。
最佳答案
您需要 JavaScript 来实现您的目标。
$(document).ready(function () {
var $outer = $('.outer');
var $inner1 = $('.inner1');
var $inner2 = $('.inner2');
if ($inner2.width() > 150) {
$inner1.css('width', $inner2.width()+'px');
$outer.css('width', $inner2.width()+'px');
}
else
{
$outer.css('width', '150px');
}
});
.outer {
background-color: yellow;
}
.inner1 {
display: inline-block;
background-color: red;
}
.inner2 {
display: inline-block;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="min-width: 150px;">
<div class="inner1">
<span>Lorem ipsum dolor sit amet</span> // Can be very long, truncate as needed
</div>
<br />
<div class="inner2">
sadasda
</div>
</div>
我希望这能帮助你实现你的目标:)
关于css - 通过选定的内部 div 确定外部 div 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44143081/