css - 如何使div彼此相邻？

Question

我对 css 和 html 的了解相当有限。我正在尝试制作包含图像和一行文本的图块，这些图块应该彼此相邻，如果已使用屏幕的宽度，则继续下一行。

这张图片显示了我需要的东西。蓝色区域是图像，它下面的文本是水平对齐的center。瓷砖的宽度为 160 像素，它们的高度取决于文本的长度，但至少应为 150 像素。很明显，我知道我必须使用 div，但我真的没有比这更进一步的了。

Answer 1

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}

演示

调整结果部分的大小以查看效果

min-height:150px将默认高度设为 150px

height:auto有助于根据内容扩展 div。

float:left使 div 彼此相邻。

Answer 2

你在 w3schools 中看过这个图片库示例吗？

http://www.w3schools.com/css/css_image_gallery.asp

示例代码-

html-

<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>

CSS-

div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}   
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}

Answer 3

看看这个：

http://jsfiddle.net/LX6EY/

HTML

<div class="element">
    <p>Some content goes in here!</p>
</div>
<div class="element">
    <p>Some content goes in here!</p>
</div>
<div class="element">
    <p>Some content goes in here!</p>
</div>

CSS

.element { background: #666; border: 1px solid #000; color: #fff; float: left; height: 260px; padding: 20px; width: 210px; }

有关浮动的更多信息，请参阅此处，它们非常有用，目前对于大多数网站的布局都非常重要。