html - 两个静态 DIV 之间的动态大小的文本框

Question

我正在尝试创建一个横跨中间列整个宽度的文本框。每当我将文本框的宽度设置为 100% 时，尽管它低于 div 并且看起来不太好。如何保持文本框包含在中间 DIV 中并使其成为中间 DIV 的 100%？

HTML

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">
  <div>
    <input type="text" style=""/>
  </div>
</div>

CSS

.leftsidebar { width: 60px; background:red; float:left; } 

.rightsidebar { background:blue; width: 170px; float:right; } 

.content { width: auto;background:yellow; }

.content input[type='text'] { width: 100%; }

http://jsfiddle.net/v0mp0wgm/

Answer 1

您可以使用 flexbox 实现此目的.首先，您要为您的内容创建一个包含 div，然后将其分配给 display: flex;。之后，将您的 .content div 移动到左侧边栏和右侧边栏之间，并移除它们的 float 。然后，为您的 .content 和 .content input[type='text'] 类提供 100%; 的宽度，这样就可以了去。

.container {
  display: flex;
}

.leftsidebar { width: 60px; background:red; } 

.rightsidebar { background:blue; width: 163px;} 

.content { width: auto; background:yellow; width: 100%; }

.content input[type='text'] { width: 100%; }

<div class="container">
  <div class="leftsidebar">a</div>
  <div class="content">
    <div>
      <input type="text" style=""/>
    </div>
  </div>
  <div class="rightsidebar">b</div>
</div>

JSFiddle