4

タイトルがすべてを物語っています。私はこのようなものが欲しい：

ここに画像の説明を入力

左のボックスは左に、右のボックスは右に配置する必要があります。どちらも幅を固定する必要があります (例: 200px)。中間の div は、その間のサイズを取る必要があります。その幅は設定されていませんが、残りの幅を取ります。

ありがとう。

4

5 に答える 5

3

ここにデモhttp://jsfiddle.net/yeyene/GYzVS/があります

onReady と onResize でもうまく機能しています。

JS

$(document).ready(function(){
    resizeMid();    
    $(window).resize(function() {
      resizeMid();
    });    
});  

function resizeMid(){
    var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
    $('#middle').css({'width':mid_width});
}

HTML

<div id="main">
    <div id="left">Left</div>
    <div id="middle">Middle</div>
    <div id="right">Right</div>
</div>

CSS

html, body{
    margin:0;
    padding:0;
}
#main {
    float:left;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float:left;
    width:100px;
    height:300px;
    margin:0;
    background:red;
}
#middle {
    float:left;
    width:100%;
    height:300px;
    margin:0;
    background:blue;
}
#right {
    float:left;
    width:100px;
    height:300px;
    margin:0;
    background:red;
}
于 2013-06-27T02:15:29.300 に答える
3

これが実用的なものです。

使用マージン: 0 auto; ほとんどの場合、要素が中央に配置されます。(簡単な注意: これが機能するには、要素に宣言された幅が必要です。)

マージン: 0 auto; rule は、0 の上マージンと下マージン、および自動の左マージンと右マージンの省略形です。左右の自動余白が連携して要素をコンテナの中央に押し込みます。

マージン: 0 auto; 設定はすべてのセンタリング状況で完全に機能するわけではありませんが、多くの状況で機能します.
参考： CSS HTMLで中央を浮かせられない 

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>

CSS

.leftsidebar 
{ 
height: 608px; 
width: 60px; 
background:red; 
float:left; } 

.rightsidebar 
{ 
background:blue; 
height: 608px; 
width: 163px; 
float:right; 
} 

.content 
{ 
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
于 2013-06-27T02:17:06.310 に答える
2

javascriptなしで、htmlとcssだけでこの1つのFIDDLEを試すことができます

<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>

CSS

div {
    height:500px;
    position:absolute;
    border:0px;
    padding:0px;
    margin:0px;
}
.c1, .c3 {
    width: 200px;
    background-color:red;
}
.c1, {
    left:0px;
}
.c3 {
    right:0px;
}
.c2 {
    margin-left:10px;
    margin-right:10px;
    background-color:blue;
    left:200px;
    right:200px;
}
.container {
    width:99%;
}
于 2013-06-27T02:24:12.837 に答える
0

個人的には JS の使用を避け、CSS を使用してこれを行います。#container ラッパーを追加してから、幅を好きなように定義してから、左右と中央の div に % を使用できます

以下のサンプル CSS:

<div id="container"> 
        <div id="left-column"> </div>
        <div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
        <div id="right-column"> </div>
</div>

#container{
   float:left;
   width:1000px;
   *background-color:blue;
}
#left-column, #middle-column, #right-column{
        height:500px;
        float:left;
}
#left-column, #right-column {
    width:20%;
    background-color:red;
}

#middle-column {
    background-color:green;
    width:60%;
}
于 2013-06-27T02:24:53.447 に答える
0

[更新しました]

テーブルを使用すると、それ自体の幅が調整されます。float スタイルが最初に頭に浮かんだのですが、ギャップを埋めるために要素の幅を調整しません。

html:

<table>
    <tr>
        <td style="width:10%;"><div id="d1"></div></td>
        <td><div id="d2"></div></td>
        <td style="width:10%;"><div id="d3"></div></td>
    </tr>
</table>

CSS:

#d1,#d3{
    background-color:red;
    width:100%;
    height:300px;
}
#d2{
    background-color:blue;
    width:100%;
    height:300px;
}
table{
    width:100%;
    height:100%;
}

デモ

アップデート：

テーブルや過剰な js 計算を使用したくない場合は、これを使用します。

#d1,#d3{
    float:left;
    background-color:red;
    width:10%;
    height:300px;
}
#d2{
    float:left;
    background-color:blue;
    width:80%;
    height:300px;
}

デモ

于 2013-06-27T02:14:06.207 に答える