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＆＃39; s的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>

我希望这可以帮助您实现目标：）

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

1 个答案: