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并移除它们的浮动。然后，将.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

Answer 2

一种选择是将float:left应用于所有内容并使用calc()：

＆＃13;

.leftsidebar {
float:left;
width: 60px;
background:red;
}

.content {
float:left;
width: calc(100% - 60px - 170px);
background:yellow;
}

.rightsidebar {
float:left;
width: 170px;
background:blue;
} 

.content input[type='text'] {
display: block;
width: 100%;
}

＆＃13;

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

＆＃13;

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

2 个答案: