1. ホーム
  2. 質問と答え
  3. CSS：親の幅に応じてdivの幅をサイズ変更

CSS：親の幅に応じてdivの幅をサイズ変更

2010-12-14 10 views
3

私は基本的に流体レイアウトを構築しています。 私のHTMLは次のようである：ここでは CSS：親の幅に応じてdivの幅をサイズ変更

<div id="container"> 
    <div class="box" id="left">Left</div> 
    <div class="box" id="center">This text is long and can get longer</div> 
    <div class="box" id="right">Right</div> 
    <div class="clear"></div> 
</div>

は、CSSです：私が知る必要がある何 

#container{ 
    width: 100%; 
} 
.box{ 
    float: left; 
} 
#left, #right{ 
    width: 100px; 
} 
#center{ 
    width: auto; /* ? */ 
    overflow: hidden; 
} 
.clear{ 
    clear:both; 
}

私は#containerがリサイズされずに#centerを再サイズを得るのですかあります要素は互いに下に移動します。

出典

2010-12-14 Franky Chanyau

+0

を設定するだけの簡単な補正：

This text is long and can get longer
idが「中央」である。） – stecb

+0

歓声、私はどういたしまして –

+0

ことをやったと信じカント、無ちゃったごめんなさい。 ） – stecb

答えて

2

（これらの修正をお試しください単純なフローティング要素、必要性なし絶対elemsまたはパディング）

just added a new fiddle

<!DOCTYPE html> 

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>fluid layout</title> 
<style> 
    /*class to set the width of the columns */ 
    .floatbox{ 
     width:100px; 
    } 

    #container{ 
     width: 100%; 
     float:left; 
    } 
    #left{ 
     float:left; 
    } 
    #right{ 
     float:right; 
    } 
    #center{ 
     overflow: hidden; 
    } 
    .clear{ 
     clear:both; 
    } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <!-- floating column to the right, it must be placed BEFORE the left one --> 
     <div class="floatbox" id="right">Right</div> 
     <div class="floatbox" id="left">Left</div> 

     <!-- central column, it takes automatically the remaining width, no need to declare further css rules --> 
     <div id="center">This text is long and can get longer</div> 

     <!-- footer, beneath everything, css is ok --> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

出典

2010-12-14 13:53:14 stecb

1

使用時のコンテナのパディングと絶対位置左/右になります発生するfloat問題を回避するため、完全にこれを行うとする最も簡単な方法パディング領域内の要素。 （http://www.jsfiddle.net/gaby/8gKWq/1でデモ）

Htmlの

<div id="container"> 
    <div class="box" id="left">Left</div> 
    <div class="box" id="right">Right</div> 
    <div class="box" id="centre">This text is long and can get longer</div> 
</div>

もはや問題ではありませんdiv要素の順序..

のCss

#container{ 
    padding:0 100px; 
    position:relative; 
} 
.box{ 
    /*style the boxes here*/ 
} 
#left, #right{ 
    width: 100px; 
    position:absolute; 
} 
#left{left:0;top:0;} 
#right{right:0;top:0;} 

#center{ 
    /*anything specific to the center box should go here.*/ 
}

出典

2010-12-14 13:42:22

関連する問題

 関連する問題