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

2 つの例があります。1 つ目は、フッター全体に固定の高さを使用し、側面にはフロートを使用します。2 つ目は可変高フッター (「中央」の 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

内部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>
于 2013-05-16T03:23:40.480 に答える