2

目前在尝试将这些带边框的文本框起来以与上述图像保持对齐时遇到问题，当我重新调整页面大小时，它们会与预期图像保持一致。目前，我让它们被迫贴在带有边距 css 的图像下方，但是一旦我重新调整框的大小，所有框都在图像下方逃逸。

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

    <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

将每个图像和对应的文本包装在一个容器中并float:left在 css 中设置。摆脱#textboxesdiv。#main然后通过将其设置为所有图像的宽度（加上填充 - 如果需要）来居中您的div。请参阅使用所有代码的示例：

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

于 2012-12-05T21:30:24.463 回答