0

ページを注意深く見ると、http://www.ribevi.com/red_wines.html

5 番目のワイン AMARONE には、ボトルの画像の周囲と下にテキストが表示されていることがわかります。

それが起こらないようにブロックし、すべてのテキストを右側に配置する方法はありますか...その中にテーブルを作成する必要はありませんか??

4

6 に答える 6

1

div containerあなたはあなたのデータをaとfloatあなたのdivtoでラップし、rightそれにいくらかの幅を与える必要があります：

これらのスタイルを使用してデータをコンテナーにラップするdivと、後でそのクラスを作成できます。

<div style="width: 320px; text-align: justify; float: right;">

このワインを見てください：Montecariano Valpolicella Classico Superiore Ripasso

私のフィドル

于 2012-10-04T07:57:47.410 に答える
1

ブロック要素（アラグラフなど）float内の画像を（左または右に）する必要があります。p

<p>
<img src="your-image">
Lorem ipsum dolor sit amet....
</p>

p img {
    float:left;
    padding-right:10px;
    padding-bottom:10px;
}​

デモ

于 2012-10-04T07:52:12.503 に答える
0

テーブルを作成する必要はありませんdisplay: table-cell。CSS ステートメントを使用するだけです。それはあなたが望むことをします。少なくとも、それは完全に現代的で有効な方法の1つです。TABLE目的と意図を指示するマークアップに を含めること (たとえば、数学やその他の科学の値の表を扱う場合) と、コンテンツが表のように見えるtable-cellようにマークアップのスタイルを設定することには違いがあることに注意してください。行う。つまり、HTML+CSS の世界では、デバイス上で表に似ていても表にはなりません。テーブルが悪いとあなたに信じ込ませようとする人々に質問してください - それ自体は悪いものではありません。悪いのは置くことですTABLE属していないドキュメント内のタグ。それに直面してみましょう、平均して、私たちが持っているすべての Web サイトの約 5% がテーブルを必要としています。ただし、テーブル スタイルのレンダリングを利用するようにページをスタイリングすることはまったく問題ありません。

<div style="height: 100%;"><!-- the children of this element will automatically occupy its entire height, courtesy of 'table-cell' rule. -->
    <div style="display: table-cell">
        <img src="example.png" />
    </div>
    <div style="display: table-cell">
        Quick brown fox jumps over the lazy dog.
        <!-- Wall of text follows... -->
    </div>
</div>

"Quick Brown ..." というテキストは、フローティング要素のテキストのように画像を囲むことはありません。画像の下の領域を常にクリアに保ちながら、単純に下に進みます。テーブル内のもののように。

于 2012-10-04T09:02:41.453 に答える
0

ここでは、彼らが提案したことを行いましたが、明らかに値を変更する必要があります。

http://jsfiddle.net/sXj2N/

于 2012-10-04T08:01:53.283 に答える
0

最も簡単な解決策は、画像に margin-bottom を設定して、テキストが画像の下に入らないようにすることです。

アップデート：

.tdCell img, .image {
    display: block;
    float: left;
    height: 400px;
    padding-right: 20px;
    vertical-align: middle;
    width: 120px;
    margin-bottom: 30px;
}
于 2012-10-04T08:47:58.290 に答える
0 
<div style="width:600px; float:left; height:auto;">
<div style="float:left; width:200px; background-color:red; display: table-cell">left container</div>
<div style="float:left; width:200px; background-color:Green; display: table-cell">Mind container</div>
<div style="float:left; width:200px; background-color:Black; display: table-cell">right container</div>

</div>
于 2012-10-04T09:21:10.820 に答える