0

这个问题经常被问到，但到目前为止，没有一个解决方案对我们有帮助。 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

4

2 回答 2

1

CSS3width: calc(90% - 30px);可以工作 - 但是支持它的浏览器数量非常有限。

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

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

然后在宽度form变化时更新它。

于 2013-02-03T00:40:45.647 回答
0

您必须删除 .input_edit 和 #holder 上的边距，并应用 box-sizing:border-box; 对那些元素。

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

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

于 2013-02-03T00:30:48.493 回答