3

私のcssとhtmlの知識はかなり限られています。画像と 1 行のテキストを含むタイルを作成しようとしていますが、これらのタイルは互いに隣り合っており、画面の幅が使用されている場合は次の行に続きます。

必要なものの例

この画像は私が必要なものを示しています。青い領域は画像で、その下のテキストは水平に配置されていcenterます。タイルの幅は 160 ピクセルで、高さはテキストの長さによって異なりますが、少なくとも 150 ピクセルにする必要があります。もちろん、divを使用する必要があることはわかっていますが、それ以上のことはできません。

4

3 に答える 3

5

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:leftdiv を隣り合わせにします。

于 2012-11-28T11:26:58.133 に答える
1

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;
}
于 2012-11-28T11:21:25.973 に答える
0

これを見てください：

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

フロートの詳細については、こちらを参照してください。フロートは非常に便利で、現時点ではほとんどの Web サイトのレイアウトに非常に重要です。

于 2012-11-28T11:29:51.340 に答える