2

現在、ページのサイズを変更したときに予想される画像に固執するように、これらの縁取りされたテキスト ボックスを上記の画像に合わせて配置しようとして問題が発生しています。現在、マージンcssを使用して画像の下に強制的に貼り付けていますが、ボックスのサイズを変更すると、ボックスはすべて画像の下に逃げます。

EDIT：コードを更新しました-同様の問題がまだありますが、これはより有望に見えます-現在の状態の写真を添付し​​てください。 コードを更新した後の現在の問題

    <body>

        <div id="container">

            <div id="header">
                <img class="leaf" src="images/freshleaf.png" height="150px" alt="freshtext"/>
                <!--<button class="navbutton"> <strong> TEST </strong> </button>-->
            </div>

            <div id="body">
                <div id="main" class="">
                    <div class="column">
                        <img class="smart" src="images/phone1.png" height="500px" alt="phone1"/>
                        <div class="box1"> <h3>Pie is tasty Mmmmm...</h3> </div>
                    </div>

                    <div class="column">
                        <img class="smart" src="images/phone2.png" height="500px" alt="phone2"/>
                        <div class="box2"> <h3>Pie is tasty Mmmmm...</h3> </div>
                    </div>

                    <div class="column">
                        <img class="smart" src="images/phone3.png" height="500px" alt="phone3"/>
                        <div class="box3"> <h3>Pie is tasty Mmmmm...</h3> </div>
                    </div>
                </div>
            </div>

        </div>

#body{
   text-align: center;
}

#header {
   padding-bottom: 50px;
   text-align: center;
}

#main{
    margin: 0 auto;
    text-align:left;
    width: 770px;
}

.column{
   float:left;
   padding-left: 10px;
}

.column:first-child {
   padding-left: 0px;
}

.box1{
   border: dotted;
   border-color: gray;
   padding: 2px 5px 2px 5px;
   max-width: 250px;
   text-align: center;
}

img.smart{
   margin-left: auto;
   margin-right: auto;
}
4

1 に答える 1

0

各画像と対応するテキストを1つのコンテナにラップfloat:leftし、cssに設定します。#textboxesdivを取り除きます。#main次に、すべての画像の幅に設定してdivを中央に配置します（さらに、必要に応じてパディングも行います）。すべてのコードを含むフィドルの例を参照してください。

http://jsfiddle.net/QLvt7/4/

于 2012-12-05T21:30:24.463 に答える