Question

如何在宽度上执行此操作？灰色中间div为100％ - 50px - 50px。请出示代码;在这张图片下面是我的猜测

<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>

Answer 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;
}

Answer 2

如何在内部div上设置保证金？

为方便起见，只显示样式标记，移至css文件。

<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>

HTML5 CSS3页脚栏

2 个答案: