如何使div彼此相邻？

Question

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

此图显示了我的需求。蓝色区域是图像，其下方的文本是水平对齐的center。瓷砖宽度为160px，高度取决于文本的长度，但应至少为150px。我知道我必须与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}

<强> DEMO

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

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

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

float:left让divs彼此相邻。

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; }

有关花车的更多信息，请参阅here，它们非常有用，而且目前对大多数网站的布局都非常重要。