HTML / CSS kullanarak bir görüntünün etrafına metin nasıl kaydırılır

106

Aşağıdaki resimdeki gibi bir metin bloğu tasarlamak istiyorum:

görüntü açıklamasını buraya girin

Bunun mümkün olup olmadığını sorguluyor musunuz?

html css

— user1780343
kaynak

1

Girinti ve

— yaslama

Metni normal <p>etiketlerde olduğu gibi bir görüntünün etrafına mı kaydırmaya çalışıyorsunuz , ancak ayrıca bahsetmiştiniz <textarea>, bu tamamen farklı bir sorun olabilir. Varsa neden HTML'nizi göndermiyorsunuz? Teşekkür ederim.

— Marc Audet

1

Evet, sadece php görüntüsünü sola kaydırırsınız ve metin onun etrafına sarılır :-)

— Jack Tuck

Tüm bu yorumlar ve kabul edilen bir cevap yok ...

— Dave Kanter

111

floataşağıdaki gibi görüntü kapsayıcınıza ihtiyacınız var :

HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

VAKTİNİ BOŞA HARCAMAK

http://jsfiddle.net/kYDgL/

— BAŞLANGIÇ
kaynak

51

CSS Şekilleri ile metni dikdörtgen bir görüntünün çevresinde kaydırmaktan bir adım daha ileri gidebilirsiniz.

Aslında metni, etrafına saracağınız görüntünün veya çokgenin kenarının şeklini alacak şekilde kaydırabilirsiniz.

DEMO FIDDLE (Şu anda webkit üzerinde çalışıyor - caniuse )

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Snippet'i genişlet

Ayrıca, CSS Şekilleri hakkında iyi bir liste ayrı makale .

— Danield
kaynak

1

Nesnenin ortada olması için nesneyi "ÇEVRESİNDE" sarmanın bir seçeneği var mı?

— redestructa

@redestructa CSS istisnalarına göz atın. Gönderime bakın: stackoverflow.com/a/19895616/703717 Şu anda yalnızca IE'de destekleniyor - caniuse.com/#feat=css-exclusions

— Danield

20

BeNdErR yanıtına ek :
"Diğer METİN" öğesi aşağıdaki float:nonegibi olmalıdır :

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>

Snippet'i genişlet

— T.Todua
kaynak

Bunu çalıştırabilmemin tek yolu bu .. Ve en temiz çözüm.

— andygoestohollywood

float: hiçbiri beni kurtaran şey değildi! Yüzmeye çalışırken tutuldu: ikinci elementi boşuna doğru.

— bkunzi01

11

Eğer görüntü boyutu değişkendir veya tasarımdır duyarlı metin kaydırma ek olarak, bir ayarlayabilirsiniz paragraf için min genişlik çok olmaya daraltmak için önlemek için.
İstenilen minimum paragraf genişliğine sahip görünmez bir CSS sözde öğesi verin. Bu sözde öğeyi sığdırmak için yeterli alan yoksa, paragraf da beraberinde götürülerek görüntünün altına itilecektir.

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

— Jithin B
kaynak

Sanırım cevabın bana biraz pastırma kazandırabilir. Duyarlı bir tasarımda üst üste yığılmış sol kayan görüntülerle ilgili bir sorun yaşıyordum. Varsayılan resim genişliğim% 30 ve her iki taraftaki resimlerle, bazen yalnızca 4 karakter genişliğinde bir metin sütunum olabilir.

— Sherwood Botsford