0

本文セットの最大幅と最小幅 (それぞれ 1260px と 960px) を持つリキッド レイアウト ページがあります。画面の左側 25% を占める左側のサイドバーと、右側 75% を占めるコンテンツがあります。コンテンツ内に、固定幅の画像 (300px x 225px) を含む 2 つの div コンテナーを配置し、それぞれの下にテキストを配置しました。

私がやりたいのは、これらの div ボックスを独自の静的な幅 (テキストの上の画像の幅によって決定される 300 ピクセル) のままにすることですが、議論のために、50 ピクセル離れたインラインで常に中央に配置できるようにすることです。 （50px離れたバー）私がそれらを持っているブラウザ（1260または960px、またはその中間のどこか）にもかかわらず。私がこれを望む理由は、マージンを使用してそれらを分離すると、ブラウザの幅の 1 つで「中央」にしか見えず (再び、それらの間に 50 ピクセルをバーで囲む)、レイアウトが流動的ではないからです。

JSFiddle: http://jsfiddle.net/fpN5t/1/

私が自分自身をうまく説明していない場合は、お知らせください。

よろしくお願いします。

<div id="content">
    <div id="upper-left-box">
        <img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
        <p>Example text example text example text example text example text example text example text example text example text</p>
    </div>
    <div id="upper-right-box">
        <img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
        <p>Example text example text example text example text example text example text example text example text example text</p>
    </div>
     <h1 class="first-content-heading">Heading 1</h1>

    <p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
    <p>&nbsp;</p>
     <h2>Heading 2</h2>

    <p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
    <p>&nbsp;</p>
     <h3>Heading 3</h3>

    <p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
    <p>&nbsp;</p>
</div> 

#content {
    width: 75%;
    float: left;
    margin: 0;
    background: #FFF;
}
#upper-left-box {
    width: 300px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    float: left;
}
.boxed-content-image {
    width: 300px;
    height: 225px;
}
#upper-right-box {
    width:300px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    float: left;
}
.first-content-heading {
    clear: both;
}
4

1 に答える 1

0

margin auto を使用して上部のボックスの周りにコンテナーを配置することで、上部のボックスを中央に配置できます。次に、探している効果のために、ボックス間に 50 ピクセルのマージンを配置できます。」

http://jsfiddle.net/fpN5t/2/

<div class="upper-boxes">

    <div id="upper-left-box">
        <img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
        <p>Example text example text example text example text example text example text example text example text example text</p>
    </div>
    <div id="upper-right-box">
        <img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
        <p>Example text example text example text example text example text example text example text example text example text</p>
    </div>

</div> 


.upper-boxes{ width: 650px; margin: 0 auto; }

#upper-left-box {
    width: 300px;
    margin:0 50px 0 0;
    position: relative;
    text-align: center;
    float: left;
}
.boxed-content-image {
    width: 300px;
    height: 225px;
}
#upper-right-box {
    width:300px;
    position: relative;
    text-align: center;
    float: left;
}

問題を正しく理解できれば幸いです。そうでない場合は、指摘してください。

于 2013-03-18T15:51:13.743 に答える