css - 通过选定的内部 div 确定外部 div 的宽度

Question

我有一个如下所示的 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一样。

Answer 1

您需要 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>

我希望这能帮助你实现你的目标:)