我有一个问题在具有固定“外边距”的div内部定位具有可变大小的输入字段和具有固定大小的发布按钮。
我提供了jfiddle example,您可以在其中看到错误的版本。
在这里你可以看到我的问题:
错误的版本: Actual website
“应该是”版本: This is what it should look like
文字说明:
正如你在第二张图片中看到的那样,对我来说底部始终位于底部非常重要......
.submitform {
display: block;
position: fixed;
bottom: 0;
...more on jfiddle...
}
...而后按钮总是在右边。底部应在左侧和右侧与上部具有相同的间隙。困难的是,输入字段应该具有灵活的大小,但应该占用左边间隙和后按钮之间的所有空间。
我希望你能帮助我,因为在网上尝试和搜索的时间没有给我带来正确的解决方案。
答案 0 :(得分:2)
试试这个:http://jsfiddle.net/jgHAA/1/
.submitform {
background: white;
display: block;
position: fixed;
/* Instead of applying margin and width, simply set the bottom, left,
and right properties to 13px */
bottom: 13px;
left: 13px;
right: 13px;
/*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
padding: 7px;
overflow:hidden;
box-sizing:border-box;
}
要让文本框填充宽度,您可以使用相同的技术:http://jsfiddle.net/jgHAA/2/
.submitform #post_input {
display: block;
font-size: 18px;
border: none;
outline: none;
padding: 3px;
/* set left and right, and z-index to make it appear behind the button.*/
left:7px;
right:7px;
position:absolute;
z-index:-1;
}