我对 css 和 html 的了解相当有限。我正在尝试制作包含图像和一行文本的图块,这些图块应该彼此相邻,如果屏幕宽度已被使用,则在下一行继续。
这张图片显示了我需要的东西。蓝色区域是图像,其下方的文本水平对齐 center
。图块宽 160 像素,高度取决于文本的长度,但至少应为 150 像素。显然,我知道我必须使用 div,但我真的不能再进一步了。
最佳答案
HTML
<div><img src=".jpg" width="110" />text</div>
.
.
.
<div><img src=".jpg" width="110" />text</div>
CSS
div{
width:160px;
border:1px solid grey;
text-align:center;
min-height:150px;
height:auto;
vertical-align:middle;
padding:8px;
float:left
}
img{display:block; margin:0 auto}
DEMO
调整结果部分的大小以查看效果
min-height:150px
将默认高度设为 150pxheight:auto
有助于根据内容扩展 div。float:left
使 div 彼此相邻。关于css - 如何使 div 彼此相邻?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13603821/