web-dev-qa-db-ja.com

再配置された要素を折りたたむdiv

次の外観を持つ行のリストが必要です。

+------------------------#main-----------------------+
|                                                    |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| |      | vel est porttitor et laoreet enim         |
| +------+ pellentesque. Proin tristique tortor sit  |
|          amet magna ornare eleifend. Aliquam       |
|          placerat sapien vitae tellus mattis       |
|          euismod.                                  |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| |      | vel est porttitor et laoreet enim         |
| |      | pellentesque.                             |
| +------+                                           |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| +------+ vel est porttitor et laoreet enim         |
|          pellentesque.                             |
|                                                    |
|                                                    |
+----------------------------------------------------+

div id = "main"に上記のすべてがあります。各画像とテキストのペアはdiv class = "ProdList"にあります。上記でわかるように、写真の高さは異なりますが幅は異なります。テキストは、写真よりも高い場合とない場合があります。これが私の問題の原因です。画像または段落のどちらが高いかに関係なく、各。ProdListの下に20pxのマージンが必要です。以下のcssは、テキストが画像よりも高い限り、完璧な結果をもたらします。しかし、私は写真を配置しているので、。ProdListはそれを取り囲むことを心配しなくなりました。これにより、上の図がテキストよりも高い場合、下に。ProdListが表示されます。画像の代わりにテキストの位置を変更しようとしましたが、逆の問題が発生します。 。ProdListに画像とテキストの両方を完全に含めるにはどうすればよいですか？

これが私が試したCSSです：

#main {width: 600px; margin: 10px auto; border: 1px solid gray; padding: 20px;}
/*just a centered, fixed width area*/

.ProdList {margin-bottom: 20px; position: relative;}
/*contains an image and a paragraph*/

.ProdList p {margin-left: 110px;}
/*makes room for the picture*/

.ProdList img {position: absolute;top: 0;}
/*moves the picture to the upper left of .ProdList*/

「Clear：both」を追加しても、効果はありません。

これは技術的な表形式のデータであるため、CSSの神々を怒らせずにテーブルを使用できると思いますが、これは可能だと確信しています。何かが足りないだけです。

css
3
Jeff

これは私のために働く：

#main {width: 600px; margin: 10px auto; border: 1px solid gray; padding: 20px;}

.ProdList {
     padding-bottom: 20px; 
     float: left; 
     clear: left; 
     width: 100%; 
     border:2px solid green
}
/*contains an image and a paragraph*/

.ProdList p {
     margin-left: 50px;
     float:left;
     width:60%;
}
/*makes room for the picture. Play with margin and width % for best fit*/

.ProdList img {float: left;width:100px}
/*moves the picture to the upper left of .ProdList*/

ProdList DIVの「境界線」は、DIVの範囲を確認して、崩壊しないことを確認するためのものです。私はよく

div {
   border: 1px solid red;
}

cSSファイルの下部にあるので、DIVが実際に落ちている場所を確認したいときにコメントを外すことができます。

ここで唯一注意が必要なのは、画像が絶対に配置されていないため、段落のマージンが画像の側面に対して相対的になっていることです。画像の幅がすべて同じである場合、imgの幅を取り出すことができます（とにかく画像を引き延ばします-ほぼ同じ幅で、高さが異なるいくつかの画像をスクリーングラブしました。

更新：

IE7でこれを動作させるためにProdList divに100％の幅を追加し、IEとFirefoxの両方で動作させるために段落の60％の幅を追加しました。まだtweekingが必要な場合があります。

2
CMPalmer

最も簡単な方法は、ポジショニングのものを取り除き、画像と段落をフロートさせることです。次に、overflow: hiddenまたはfloat: leftを.ProdList要素に追加します。

0
DisgruntledGoat

まさにこの問題に対してfacebookによって実装された非常に甘いソリューションがあります。 firefoxにfirebugがインストールされている場合は、簡単に確認できます。以下に例を示します。

http://www.facebook.com/pages/Yahoo-Nachrichten/108333755877035?ref=ts&v=wall （常に画像とその横にテキストがあります）

画像の取得：float：left、テキストの取得：display：table-cell; vertical-align：top;幅：1000px;

唯一の欠点は、IE6およびIE7の特定のコードを記述する必要があることです。これらのブラウザーでは、開発者ツールバーを使用してこれらのブラウザーのfacebookページを見ることができます。

0
andrej