3

ブラウザー ウィンドウのサイズに合わせてスケーリングするように、相対測定単位を使用して画像とタイトルを含む 4 列のグリッドを表示するポートフォリオ サイトの一部を構築しています。今のところ、float:left のプロパティが割り当てられた各 .item と #container 全体の幅 (この場合は 1100px または 68.75em) のパーセンテージとして定義された max-widths で問題なく動作します。スパン内の各画像の下にあるタイトルを除いて、正常に機能します。タイトルの 1 つが 220 ピクセル (またはコンテナーの 20%) よりも長い場合、高さが増加し、次の行のアイテムが「スタック」します。

PHP を使用してこれを簡単に修正し、4 番目の div ごとに clear:both div を挿入して (html に新しい「行」を効果的に作成するため)、メディア クエリまたはその他のデバイスを使用して列の数を 3 に減らすことを計画しています。 、2 および 1 のように、ブラウザ ウィンドウが縮小します。アイテムをフローティングすることで行を定義できれば簡単です。可能な解決策？

スタイル:

body {
font-size: 100%;
line-height: 100%;  /* Neat */
font-family: Helvetica, Arial, sans-serif;
}

#container {
max-width: 68.75em;     /* 1100px */
margin: 40px auto;
border: 1px solid #000;
}

.item {
float: left;
    width: 20%;
max-width: 20%;
height: auto;
padding: 2.5%;
background-color: #eee;
}

.item img {
display: block;
    width: 100%;
max-width: 100%;
height: auto;
}

.item span {
    width: 100%;
max-width: 100%;
margin-top: 1em;
display: block;
text-transform: uppercase;
line-height: 1.5em;
}

HTML:

<div id="container" class="cf"> <!-- "cf" comes from my reset, it's a clear-fix --> 
  <div class="item">
    <img src="images/placeholder.png" height="220" width="220" alt="" title="" />
    <span>A Title that is Slightly Longer than the Others</span>
  </div>
  <div class="item">
    <img src="images/placeholder.png" height="220" width="220" alt="" title="" />
    <span>A Title</span>
  </div>

... (これらの div を繰り返します)

</div>
4

2 に答える 2

2

可能なオプション:

  1. height2 つのライン ケースをカバーするのに十分な量を設定します
  2. .grid-item { display: inline-block; vertical-align: top; }
  3. タイトルspanを a div、 setheightおよびoverflow: hidden
于 2012-12-07T00:58:20.977 に答える
0

短いタイトルを付けることをお勧めします。それが不可能な場合は、試すことができます

.item > span{
    height: 0;
    position: relative;
}

画像は適切に表示されますが、長すぎるタイトルは、そのタイトルの下の画像の上に表示されます。これがあなたのニーズに受け入れられるかどうかはわかりませんが、役に立つかもしれません。

于 2012-12-07T03:45:37.713 に答える