CSSの配置例(タイトル、イメージ、テキスト、およびその他のリンクを読む)

スライスする次のデザインがあるとします。

enter image description here

divの絶対配置を使用しないで、テーブルレイアウトを使用しない(レイアウトと呼ぶことができれば:))

0
はいはい! :))))
追加された 著者 Narek,
おそらくフロートで?
追加された 著者 Marnix,

4 答え

私はそれがこのjsFiddleのようなものになると思う:

http://jsfiddle.net/cFqDX/

<html>
    <body>
        <div class="mainbody">
            

Some title

            
            
Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here.Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. </div> </body> </html>

そして、CSSのために。

.mainbody
{
    background-color:gray;
    width:800px;
    height:300px;
}

.leftimage
{
    margin:10px;
    float:left;
}

This gives me the following image: enter image description here

1
追加された

2つのdivを作ってください。左側には float:left と右側に float:right の画像が含まれています。そうすることによって、お互いの隣に2つの「列」が表示されます。

しかし、基本的にこれには無限の解決策があります....

1
追加された
ありがとうございます.3つの「列」がある場合はどうなりますか? img;テキストブロック1;テキストブロック2
追加された 著者 Narek,
より具体的にしてください。どのように中央の列を作成する必要がありますか?左と右の列は、ちょうど右または左に浮かんでいるクリアされています。それではセントラルはどうですか?
追加された 著者 Narek,
OK。ありがとうございました!!!
追加された 著者 Narek,
各テキストブロックのdivを再度指定し、floatオプションを使用します。
追加された 著者 Jules,
中央の列は浮動する必要はありません。私の主張を説明するために作ったJSfiddleをチェックしてください: jsfiddle.net/MUpmD
追加された 著者 Jules,

display:inline-block には、 float:left か、テキストの周りにdivを作成することができます。

1
追加された
表示付きの2番目のバージョン:inline-blockは動作しません:(
追加された 著者 Narek,
ああ、私はイメージを左に浮かれば、2番目のバージョンが動作します!ありがとう!
追加された 著者 Narek,
画像がそれ自身のものであればそれはすべきです。イメージがブロック内にある場合、そのブロックは display:inline または inline-block を持つ必要があります。しかし、それがあなたのために働かないなら、常にフロートがあります。 :)
追加された 著者 GolezTrol,

私はここで jsfiddle を作って、ブラウザ間でかなりうまく動作し、維持管理が簡単になると期待しています。

1
追加された
ありがとう、なぜあなたはオーバーフローを使用するのですか?クラス。製品?
追加された 著者 Narek,
削除されました!何も起こりません :))!私はあまりにもUPDATEボタンを押しました!
追加された 著者 Narek,
それを削除し、何が起こるかを確認してください:)
追加された 著者 Steve Adams,
奇妙なことに、.product divが浮動要素を無視するため、最初のブロックの画像が.product divと重なるようにする必要があります。意味的に役に立たない要素をコンテナに入れるのではなく、これを一種の 'clearfix'として使います。編集:うわー、あなたは正しいです。私はここで自分よりも前にいた。それは必要ないと思われます。
追加された 著者 Steve Adams,