我对 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 将默认高度设为 150px
height:auto 有助于根据内容扩展 div。
float:left 使 div 彼此相邻。

关于css - 如何使 div 彼此相邻?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13603821/

10-11 23:32
查看更多