jquery - 宽度 : calc(auto + 50px); doesn't work

Question

是否可以选择使 #search_inner 的宽度等于其中最宽的元素 + 50px？宽度:计算(自动+ 50px)；似乎不起作用。我需要宽度为自动，而不是100%。

纯 CSS 解决方案会更可取。

简化的代码示例:

<div id="search_outter"> <!-- search window -->
  <div id="search_nav" style="float:left"> <!-- search navbar -->
    ...
  </div>

  <div id="search_inner" style="float:right"> <!-- actual search results -->
    ...
  </div>
</div>

Answer 1

您可以使用 #search_inner:not(:empty) 选择器并添加 padding-right:50px; 当您的 #search_inner 有一些内容。所以它将和内容一样宽(自动) + 50px padding --> example

#search_inner:not(:empty){
  padding-right:50px;
  height:20px;
  background:red;
  width:auto;
}

第一段-无内容

#search_inner:not(:empty) {
  padding-right: 50px;
  height: 20px;
  background: red;
  width: auto;
}

<div id="search_outter">
  <!-- search window -->
  <div id="search_nav" style="float:left">
    <!-- search navbar -->
    Nav bar
  </div>

  <div id="search_inner" style="float:right"></div>
</div>

第二个片段-一些随机内容

#search_inner:not(:empty) {
  padding-right: 50px;
  height: 20px;
  background: red;
  width: auto;
}

<div id="search_outter">
  <!-- search window -->
  <div id="search_nav" style="float:left">
    <!-- search navbar -->
    Nav search
  </div>

  <div id="search_inner" style="float:right">Some long random content</div>
</div>