gpt4 book ai didi

css - 在图像下对齐带边框的文本框以便它们一起移动时出现问题

转载 作者:行者123 更新时间:2023-11-28 03:36:49 26 4
gpt4 key购买 nike

目前在尝试让这些带边框的文本框与上面的图像保持一致时遇到问题,当我重新调整页面大小时,它们会与预期图像保持一致。目前,我让它们被迫粘贴在带有 margin 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;
}

最佳答案

将每个图像和对应的文本包装在一个容器中,并在 css 中设置 float:left。去掉 #textboxes div。然后将您的 #main div 设置为所有图像的宽度(加上填充 - 如果需要)。查看所有代码的示例 fiddle :

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

关于css - 在图像下对齐带边框的文本框以便它们一起移动时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13731552/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com