0

この CSS レイアウトを取得しました: http://www.cssdesk.com/Lgg4q

HTML

<div id="wrap">        
        <div class="img-wrap">
            <img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
        </div>
        <div class="info">
            <p>Lorem</p>
            <p>ipsum</p>
        </div>

        <div class="img-wrap">
            <img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
        </div>
        <div class="info">
            <p>Lorem</p>
            <p>ipsum</p>
        </div>

        <div class="img-wrap">
            <img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
        </div>
        <div class="info">
            <p>Lorem</p>
            <p>ipsum</p>
        </div>        
    </div>

CSS

body {
    background-color: grey;
    font: 18px/ Times;
    color: black;
}

body, html {
    height: 100%;
    width: 100%;
}

p { text-align: justify; }


#wrap {
    width: 80%;
    margin-left: 10%;
    padding-top: 2%;
    position: absolute;
    font-size: 14px;
    background: yellow;
}

.info {
    margin-right: 5%;
    padding-top: 2%;
    float: left;
}


.img-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;

    float: left;
    margin-right: 1%;
    margin-top: 1%;
}​

ブラウザー ウィンドウのサイズを変更 (小さい) すると、div の動作が基本的にデザインを壊すことがわかります。この問題を処理するにはどうすればよいですか?

私の考えでは、高さを与えること#wrapでしたが、それはうまくいきません。

4

3 に答える 3

2

これが私がそれを行う方法です。http://jsfiddle.net/joplomacedo/TYjd5/ (cssdesk に変更を保存する方法がわからなかったので、jsfiddle に転送しました)

基本的に、画像ブロックと情報ブロックのそれぞれの周りにブロックと呼ばれる「ラッパー」を追加しました。幅を持たせて浮かせました。このように、ブラウザのサイズが変更されると、情報と画像が常に一緒になります。

これはあなたが探していた動作でしたか。ブラウザのサイズ変更で何をしたいですか?

于 2012-07-07T18:27:53.090 に答える
1

DIV要素はパーセンテージで使用するとうまく動作しません。または、パーセンテージで使用することを意図していないと言えます。この種の状況では、次の 2 つのオプションがあります。

  1. ブラウザーのウィンドウのサイズ変更に応答していないように見えるように、ページのデザインを作成します。例として、まさにこのウェブサイトを取り上げます。

  2. ブラウザーのウィンドウのサイズが変更されたときに、それに応じてコンテナーのサイズを変更します。これを行うには、Media Css クラスまたは jQuery を使用する必要があります。

于 2012-07-07T18:18:06.417 に答える
1

min-widthonを使用し#wrapてピクセル値を設定し、壊れないようにすることができます。

于 2012-07-07T18:19:48.197 に答える