CSS yerleştirme örneği (Başlık, resim, metin ve daha fazla bağlantı)

Dilimlemek için aşağıdaki tasarıma sahip olduğumu varsayalım:

enter image description here

Dilimlerin mutlak yerleşimini kullanarak ve tablo düzenlerini kullanmadan (hiç bir şekilde düzenler olarak adlandırılabilirlerse :)) dilimle nasıl dilimleyebilirim?

0
Evet evet! :))))
katma yazar Narek, kaynak
float ile muhtemelen?
katma yazar Marnix, kaynak

4 cevap

Bu jsFiddle gibi bir şey olacağını düşünüyorum:

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>

Ve CSS için.

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

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

This gives me the following image: enter image description here

1
katma

İki div yap. Resmi float: left ve sağdaki float: right ile içeren soldaki. Bunu yaparak yan yana iki "sütun" elde edersiniz.

Ama temelde buna sonsuz çözümler var.

1
katma
Teşekkürler, eğer 3 "sütunum" varsa, ör. img; metin bloğu 1; metin bloğu 2 ???
katma yazar Narek, kaynak
Lütfen daha spesifik ol. Merkezi sütunu nasıl oluşturmalıyım? Sol ve sağ sütunlar net, sağa veya sola yüzer. Peki merkeze ne dersin?
katma yazar Narek, kaynak
Tamam. Teşekkür ederim!!!
katma yazar Narek, kaynak
Yine her metin bloğu için bir div ve float seçeneğini kullanın.
katma yazar Jules, kaynak
Merkez sütunun yüzmesi gerekmez. Benim amacımı açıklamak için yaptığım bu JSfiddle dosyasını kontrol edin: jsfiddle.net/MUpmD
katma yazar Jules, kaynak

Float: left veya display: inline-block komutunu verdiğiniz metnin etrafında bir div yapabilirsiniz.

1
katma
Ekranlı ikinci versiyon: satır içi-blok çalışmıyor :(
katma yazar Narek, kaynak
Oh, ikinci versiyon, görüntüden ayrılırsam çalışır! Teşekkürler!
katma yazar Narek, kaynak
Görüntü kendi başınaysa. Resim bir blokta ise, bu blokta display: inline veya inline-block olmalıdır. Ama senin için işe yaramazsa, her zaman float var. :)
katma yazar GolezTrol, kaynak

Burada tarayıcılar arasında oldukça güzel bir şekilde çalışacağını ve bakımın oldukça kolay olduğunu düşündüğüm bir jsfiddle yaptım.

1
katma
Teşekkürler ama neden taşma kullanıyorsunuz: auto; sınıf için ürün.
katma yazar Narek, kaynak
Kaldırılan! Hiçbir şey olmuyor :))! BTW Ben de UPDATE düğmesine bastım!
katma yazar Narek, kaynak
Çıkarın ve ne olduğunu görün:)
katma yazar Steve Adams, kaynak
Gariptir, ilk bloktaki görüntünün .product div yüzünden, yüzen öğeleri görmezden gelmesi nedeniyle .product div ile çakışmasına neden olur. Bunu, bir anlamsal olarak işe yaramaz bir unsuru konteynere koymak yerine bir çeşit 'clearfix' olarak kullanıyorum. EDIT: Wow, haklısın. Burada kendimden geçtim haha. Gerek yok gibi görünüyor.
katma yazar Steve Adams, kaynak