0

我如何在宽度上做到这一点？灰色的中间 div 是 100% - 50px - 50px。请出示代码；这张图片下面是我的猜测

示例：（http://mediahood.net/mesgr.png） 

<div style="position:absolute;left:0px;width:50px;height:50px;"> 
<div style="width:50;height:50px;background-color:#000;margin:0px;">
<img id='txtrattach' src="/assets/txtr-attach.png" height='50px'></div> 
</div>

<div style="position:absolute;left:50px;width:258px;height:50px;font-family:'Harabara';font-size:12px;">
<input id="txtrinput" type="text" name='message' onKeyPress='return charLimit(this)' onKeyUp='return characterCount(this)'>
</div>

<div style="position:absolute;right:0px;width:50px;height:50px;"> 
<div style="width:50px;height:50px;background-color:#000;margin:0px;">
<span id='charCount'>150</span><span id='charCount2'> chars.</span> 
<input id='txtrsend' src="/assets/txtr-enter.png" height='50px' name="send" type="image" value="Send">
</div>
</div>

</dov>
4

2 回答 2

1

我有两个例子。第一个为整个页脚使用固定高度，并为侧面浮动。第二个使用可变高度的页脚（基于“中间” div 的内容），使用一种技巧，将页脚的背景设置为黑色，将中间部分设置为灰色，边距显示其余区域的背景可变高度边不延伸到（如果不是边距，文本下方会有灰色）。

<div id="footer">
    <div id="left">50px</div>
    <div id="right">50px</div>
    <div id="middle">100%</div>
</div>
<div>2:</div>
<div id="footer2">
    <div id="left2">50px</div>
    <div id="right2">50px</div>
    <div id="middle2">100%<br />100%<br />100%</div>
</div>

CSS：

#footer {
    height: 115px;
    text-align: center;
    background: #ccc;
}
#left {
    float: left;
    height: 100%;
    background: #000;
    color: #fff;
    text-align: center;
    width: 50px;
}
#right {
    float: right;
    height: 100%;
    background: #000;
    color: #fff;
    text-align: center;
    width: 50px;
}
#footer2 {
    text-align: center;
    background: #000;
}
#left2 {
    height: 100%;
    float: left;
    color: #fff;
    text-align: center;
    width: 50px;
}
#right2 {
    float: right;
    color: #fff;
    text-align: center;
    width: 50px;
    height: 100%;
}
#middle2 {
    margin: 0 50px;
    background: #ccc;
}
于 2013-05-16T03:29:37.123 回答
0

What about setting margin on inner div?

Just showing style tags for convenience, move to css file.

<style>
.outer {
    width: 400px;
    background-color: #ddd;

}

.inner {
    margin: 0 50px;
    background-color: #ccc;
}
</style>

<div class="outer">
    <div class="inner">
        inner div
    </div>
</div>
于 2013-05-16T03:23:40.480 回答