Question

请考虑以下事项。

2 DIVS - 已知宽度的左边，右边未知宽度。

我们可以让右侧填充剩余空间，但是如果我将右侧DIV交换到文本框，则它不会填充空格，而是包裹在左侧div之下。

这是一个小提琴：example

<div>
    <div id="left">
        left
    </div>
    <input type="textbox" id="right">
        right
    </input>
</div>

#left {
    float:left;
    width:180px;
    background-color:#ff0000;
}
#right {
    width: 100%;
    background-color:#00FF00;
}

我很困惑 - 有什么建议吗？

仍然没有应有的表现！

这里的新小提琴：updated fiddle

Answer 1

<强> JSFiddle 输入是由默认内联而且只是块级元素可以获取浮动元素之后剩余的剩余空间。因此，您应该将display属性更改为block，即display:block

＆＃13;

 #left {
     float:left;
     width:180px;
     background-color:#ff0000;
 }
 #right { 	
     display:block;
     background-color:#00FF00;
 }

＆＃13;

 <div>
     <div id="left">
         left
     </div>
     <input type="textbox" value="right" id="right"/>
 </div>

＆＃13;

编辑： http://jsfiddle.net/naeemshaikh27/MHeqG/1522/使用Calc。

Answer 2

使用Calc

如果您只想设置单个元素的宽度，可能需要查看calc()选项。

类似的东西：

width: calc(100% - width px);

其中可以将其纳入当今的大多数项目中，正如您可以从browser support中看到的那样。

您还可以使用auto宽度：

.secondElement{
  width:auto;
}

填补空白

看看这里......

* {
  margin: 0;
  padding: 0;
}
div {
  display: inline-block;
  width: 50%;
  background: blue;
}
input {
  width: 50%;
  display: inline-block;
}
.fix {
  border: none;
  background: gray;
}
.now {
  width: 49.5%;
}
.nowNew {
  width: auto;
}

<div>Div on left</div>
<input type="text" placeholder="text here" />

<br/>Notice the lengths aren't the same? Yet both are defined as 50%?
<br/><br/>
<br/>That's due to the border around the input!
<br/><br/><br/>

<div>Div on left</div><input class="fix" type="text" placeholder="text here" />

<br/><br/>
<br/>To fix 'stuff' like this, I feel the general rule in web dev. is to aim to make it 99.9% instead:
<br/><br/><br/>
<div class="now">Div on left</div><input class="now" type="text" placeholder="text here" />

<br/><br/>
<br/>Or make the input width auto:
<br/><br/><br/>
<div>Div on left</div>
<input class="nowNew" type="text" placeholder="text here" />

Answer 3

您可以使用display: table和display: table-cell完成此操作。

<强> JSFIDDLE

HTML：

<div class="container">
    <div id="left">
        left
    </div>
    <input type="textbox" value="right" id="right" />
</div>

CSS：

#left {
    display: table-cell;
    width: 180px;
    background-color:#ff0000;
}
#right {
    display: table-cell;
    width: 100%;
    background-color:#00FF00;
}
.container {
    display: table;
    width: 100%;
}

文本框填充空间

3 个答案: