2

わかりました、これが欲しいです：

ブラウザウィンドウを中心とした正しいレイアウト。

そのために、私はこのHTMLコードを持っています：

<div id="wrapForCenter">
    <div id="title">
        title
    </div>
    <div id="contentFrame">
        <div id="imagePlaceholder">
            image
        </div>
        <div id="content">
            content
        </div>
    </div>            
    <div id="buttonsBar">
        buttonsBar
    </div>      
</div>

そして私はこのCSSコードを持っています：

#wrapForCenter
{
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -160px;
    margin-left: -240px;
    width: 480px;
    height: 320px;
    border: 1px solid black;
}

#title
{        
    width: 100%;
    height: 40px;
    background-color: Blue;
}

#contentFrame
{
    height: 240px;
    width: 480px;
}

#imagePlaceholder
{
    float: left;
    width: 100px;
    height: 100%;
    background-color: Green;
}

#content
{
    float: left;
    width: 380px; /*<-- look at this*/
    height: 100%;
    background-color: Yellow;
    overflow: auto;
}

#buttonsBar
{
    clear: left;
    width: 100%;
    height: 40px;    
    background-color: Silver;
}

コンテンツの幅を100％に変更すると、なぜこれが発生するのですか？

コンテンツはそのコンテナで100％取得されますが、画像の幅は尊重されません

私が見ているのは、コンテンツの幅はcontentFrameからimagePlacehoderの幅をピクセル単位で引いたものですが、imagePlacehoderとcontentの両方にfloat：leftを指定すると、contentはその親コン​​テナーの幅を取得します。なんで？

float（おそらくdisplay：inline）を使用せずに同じ結果を得る別の方法はありますか？そして、コンテンツにwidth：100％を使用しますか？

どうもありがとうございます。CSSは私の強みではありません。

4

3 に答える 3

3

これはフロートドロップと呼ばれます。フロートは、それぞれに十分なスペースがある限り、並べて収まるように機能しますが、フロートが収まるのに十分なスペースがない場合、フロートは前のフロートの下にぶつかります。

width:100%コンテナ（#wrapForCenter）と100％の幅にすることを意味します。当然、コンテナの幅全体を指定すると、そのコンテナの内側の両側に何も収まらないため、フロートとして、その前にあるもの（以前の「兄弟」）の下に移動する必要があります。

于 2012-08-06T15:23:05.987 に答える
3

これに似た質問は、以前にstackoverflowで私自身が尋ねました。

jQueryまたはCSSを使用してdivの高さと幅を自動調整（ストレッチ）する方法

HTMLは次のように設定できます。

<div id="container">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
</div>

そしてCSSのように;

#container {
    position: relative;
    width: 300px;
    height: 200px;
}
#top, #left, #right, #bottom {
    position: absolute
}
#top {
    top: 0;
    width: 100%;
    height: 50px;
    background: #00b7f0
}
#left {
    top: 50px;
    width: 50px;
    bottom: 50px;
    background: #787878
}
#right {
    top: 50px;
    left: 50px;
    right: 0;
    bottom: 50px;
    background: #ff7e00
}
#bottom {
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #9dbb61
}

これが実際のデモです。

お役に立てれば..

注：質問をする前に、stackoverflowで検索を行うことをお勧めします（強制ではありません）。

于 2012-08-06T16:33:35.037 に答える
1

画像ホルダーを25％、コンテンツを75％に設定するか、コンテンツ領域全体（画像とコンテンツ）に割り当てたスペースの量がわかっている場合は、そこから100を引いて、その数のピクセルを使用する必要があります。しかし全体的にこれはうまくいくはずです

#wrapForCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -160px;
    margin-left: -240px;
    width: 480px;
    height: 320px;
    border: 1px solid black;
}

#title {        
    width: 100%;
    height: 40px;
    background-color: Blue;
}

#contentFrame {
    height: 240px;
    width: 480px;
}

#imagePlaceholder {
    float: left;
    width: 25%;    /* See Here */
    height: 100%;
    background-color: Green;
}
#content {
    float:right;
    width: 75%;  /* And here */
    height: 100%;
    background-color:Yellow;
  }
于 2012-08-06T15:24:54.483 に答える