Question

目前有一些问题试图让这些有边框的文字与上面的图片保持一致，以便当我重新调整页面大小时，他们会坚持使用他们的预期图像。目前我让他们被迫坚持使用边缘css的图像，但是一旦我重新调整了盒子的大小，这些盒子都会在图像下面逃跑。

编辑：更新的代码 - 仍然有类似的问题，但这看起来更有希望 - 附上当前状态的照片。 Current issue after updating code

    <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;
}

Answer 1

将每个图像和相应的文本包装在一个容器中，并在css中设置float:left。摆脱#textboxes div。然后将#main div设置为所有图像的宽度（加上填充 - 如果需要）。看看所有代码的例子：

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

问题在图像下对齐有边框的文本框，以便它们一起移动

1 个答案: