Cara membungkus teks di sekitar gambar menggunakan HTML / CSS

106

Saya ingin mendesain blok teks seperti gambar berikut:

masukkan deskripsi gambar di sini

Pertanyaan apakah ini mungkin?

html css

— pengguna1780343
sumber

1

kemungkinan duplikat Teks pembungkus di sekitar gambar dengan lekukan dan justifikasi

— mavrosxristoforos

Apakah Anda mencoba membungkus teks di sekitar gambar seperti pada <p>tag biasa dan sebagainya, tetapi Anda juga menyebutkan <textarea>, yang bisa menjadi masalah yang sama sekali berbeda. Mengapa Anda tidak memposting HTML Anda jika Anda punya? Terima kasih.

— Marc Audet

1

Ya, Anda hanya akan mengapungkan gambar php ke kiri, dan teks akan membungkusnya :-)

— Jack Tuck

Semua komentar ini dan tidak ada jawaban yang diterima ...

— Dave Kanter

111

Anda harus floatpenampung gambar Anda sebagai berikut:

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;
}

BIOLA

http://jsfiddle.net/kYDgL/

— BeNdErR
sumber

51

Dengan Bentuk CSS Anda dapat melangkah lebih jauh dari sekedar teks mengambang di sekitar gambar persegi panjang.

Anda benar-benar dapat membungkus teks sedemikian rupa sehingga mengambil bentuk tepi gambar atau poligon yang Anda balut.

DEMO FIDDLE (Sedang mengerjakan webkit - 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>

Luaskan cuplikan

Juga, berikut ini adalah daftar artikel terpisah yang bagus tentang Bentuk CSS

— Danield
sumber

1

Apakah ada pilihan untuk membungkus "SEKITAR" objek sehingga objek bisa berada di tengah?

— redestructa

@redestructa memeriksa CSS exclusions.See posting saya: stackoverflow.com/a/19895616/703717 Ini saat ini hanya didukung di IE - caniuse.com/#feat=css-exclusions

— danield

20

Penambahan jawaban BeNdErR :
Elemen "other TEXT" harus memiliki float:none, seperti:

    <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>

Luaskan cuplikan

— T.Todua
sumber

ini adalah satu-satunya cara agar saya dapat membuat ini bekerja .. Dan solusi terbersih.

— andygoestohollywood

float: tidak ada yang menyelamatkan saya! Terus mencoba melayang: kanan elemen kedua tidak berhasil.

— bkunzi01

11

Jika ukuran gambar bervariasi atau desainnya responsif , selain membungkus teks, Anda dapat mengatur lebar minimum untuk paragraf agar tidak terlalu sempit.
Berikan elemen pseudo CSS yang tidak terlihat dengan lebar paragraf minimum yang diinginkan. Jika tidak ada cukup ruang untuk memuat elemen semu ini, maka itu akan didorong ke bawah gambar, mengambil paragraf bersamanya.

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

— Jithin B
sumber

Saya pikir jawaban Anda dapat menghemat saya beberapa bacon. Saya mengalami masalah dengan gambar mengambang kiri yang menumpuk dalam desain responsif. Dengan lebar gambar default saya menjadi 30% dan gambar di kedua sisi, terkadang saya dapat memiliki kolom teks dengan lebar hanya 4 karakter.

— Sherwood Botsford