如何使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使得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; }

有關浮動的更多信息，請參閱此處 ，它們非常有用，而且目前對大多數網站的布局非常重要。