1

私は現在、新しいウェブサイトに取り組んでいますが、問題があります。2 つの div が隣り合っており、1 つはコンテンツ、もう 1 つは背景画像です。

コンテンツを含む div は、その中のコンテンツですでに自動展開されています

さて、背景画像のあるものはデザイン用で、コンテンツはありません。コンテンツのあるものと一緒に自動的に拡張して、両方が同じ高さになるようにします。

私の質問をより明確にするための2つのスクリーンショットを次に示します。

Photoshop からの表示

ブラウザから見る

HTML: 

        <div id="bubble">
            Stad Turnhout
        </div>

        <div id="date">
            <span class="created">created</span><br/><span class="date">okt<br/>2011</span>
        </div>

    </div>

    <div id="slash">
    </div>

    <div class="textfield">
        <p class="text">
            Text goes in here
        </p>

    </div>

CSS:

#slash {
float:left;
width:20px;
height:auto;
background:url(images/slash.jpg) no-repeat, url(images/socialbg.jpg) repeat;}


.textfield {
padding:25px;
width:269px;
height:auto;
float:right;
background:url(images/point.jpg) no-repeat, #FFF;}

私はいくつかのことを試していて、グーグルで何かを見つけようとしましたが、何も役に立ちませんでした. HTML/CSSでこれを修正する方法について何か考えはありますか?

ありがとう

編集：私のコードを追加しました

4

1 に答える 1

0

2 つの横に並んだ div を常に同じ高さと拡張可能にする実際の方法はありません。2 つの要素に親ラッパーを与え、そのラッパーに高さを設定してから、2 つの子 div に 100% の高さを与えることができます。それらの高さは、ラッパーの固定高さによって制御されます。

HTML:

<div class="wrapper">
        <div id="slash"></div>

        <div class="textfield">
            <p class="text">
                Text goes in here
            </p>    
        </div>
    </div>

CSS:

    .wrapper {
        height: 350px;
    }
    #slash, .textfield {
        height: 100%
    }
于 2012-09-10T12:40:58.933 に答える