7

ブラウザの幅の100％のセクションが必要なコンテンツを実装しようとしています。その中に、左側のサイズに200pxの幅のdivが必要であり、右側に動的な幅のdivが必要です。ブラウザの幅によって異なります。例..ブラウザ=900px->左div200px右div700px。そして、両方のdivは、入力する情報の量に応じて動的な高さを持ちます。ラッパーdivは、これら2つのdivの高さの中で最大のものを取ります。

これまでのところ、私はこのhtmlのようなことをしました

<section id="wrapper">
  <div id="list">
  </div>
  <div id="grid">
  </div>
</section>

css

#wrapper {
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
    overflow: hidden;
}

今、私は#listと#griddivをcssする必要があります。後で私は#griddiv内で同じことをするので、これに対する効率的な解決策があることを願っています:)

ダニエル、よろしくお願いします！

4

2 に答える 2

15

あなたはCSSでそれを行うことができます。秘訣は、float（左のdiv）と非floating div（右のdiv）を使用することです。また、左側（フローティング）divは最小の高さである必要があります。そうでない場合、左側にコンテンツがない場合、右側（非フローティング）divは左側の列のスペースを取ります。

編集：権利<div>には次のルールも必要です。

overflow: hidden;
display: block;

はoverflow: hidden、右側のdivを列として動作させます。そうでない場合、そのコンテンツは左側のdivの周りを流れます。

aのデフォルトの幅は100％であるため（ブラウザウィンドウの全幅を取ると言った#wrapperので）、幅は必要ないことに注意してください。また、その余白を削除します。<div>

次に例を示します（HTML5以外のブラウザーのためにに変更しましたが、同じように機能します）<section>。<div>

すべての要素を区別するために背景色を配置しました。

http://jsfiddle.net/pmv3s/1/

フルスクリーンバージョンは次のとおりです：http：//fiddle.jshell.net/pmv3s/1/show/light/

CSS：

#wrapper {
    padding: 40px 0;
    overflow: hidden;
    background-color: red;
    min-height: 5px;
}
#list {
    float: left;
    width: 200px;
    background-color: green;
    overflow: hidden;
    min-height: 100px;
}
#grid {
    display: block;
    float: none;
    background-color: blue;  
    min-height: 100px;
    overflow: hidden;    
}

</ p>

于 2012-08-01T19:04:49.393 に答える
1

問題に対する純粋なCSSソリューションはないと思うので、jQueryを少し使用するためのソリューションを次に示します（ただし、間違っている可能性があります）。

http://fiddle.jshell.net/L32uj/

于 2012-08-01T18:06:31.050 に答える