Question

是否可以选择使#search_inner与其中最宽的元素+ 50px一样宽？ width：calc（auto + 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。所以它将为wide as content (auto) + 50px padding - ＆gt;示例

#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>

Answer 2

您无法在CSS auto表达式中计算“calc()”。但是，您可以使用伪选择器添加该空间，请参阅演示：

#search_inner {
  background:lightblue;
}

#search_inner:after {
  display:inline-block;
  content:"";
  width:50px;
}

<div id="search_outter">
  <div id="search_nav" style="float:left">
    #search_nav
  </div>

  <div id="search_inner" style="float:right">
    #search_inner
  </div>
</div>

jsFiddle：https://jsfiddle.net/azizn/ne0vkcoh/

width：calc（auto + 50px）;不起作用

2 个答案: