Question

这个问题经常被问到，但到目前为止，这些解决方案都没有帮助我们。 form的宽度设置为100％，holder的相对宽度为10％，现在我希望将所有“免费”宽度填充input_edit。有人能帮我吗？谢谢!!

这是我的HTML

<form>
    <textarea rows="4" name="in" class="input_edit"> </textarea>
    <div id="holder"></div>
</form>

我的CSS

form {
width: 100%;
overflow: hidden;
} 
.input_edit {

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; 

width: auto;

background-color: transparent;
box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
border: 5px solid #666; 
margin: 5px;
border-radius: 5px;
height: 60px;

float: left;

}
#holder { 
border: 5px dashed #666; 
border-radius: 5px;

margin: 5px;
width: 10%; 
height: 60px; 
float: right;
}

编辑：

holder现在是10％，但我希望隐藏它，例如在移动设备上，所以我不能使用100-10 = 90％，问题是box-sizing

Answer 1

CSS3 width: calc(90% - 30px);可行 - 但支持它的浏览器数量非常有限。

下一个最佳解决方案可能是使用jQuery（或JavaScript）手动计算正确的宽度。类似的东西：

 $(".input_edit").width($("form").width() - $("#holder").width() - 40);

然后，只要form的宽度发生变化，就会更新它。

Answer 2

您必须删除.input_edit和#holder上的边距，然后应用box-sizing：border-box;这些元素。

边框将填充和边框放在10％＆amp; 90％，而不是利润率。为了更好地了解如何创建排水沟，我建议您观看此视频：http://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

我很确定这会回答你的很多问题。

输入元素以填充其容器的剩余宽度

2 个答案: