Cách quấn văn bản xung quanh hình ảnh bằng HTML / CSS

106

Tôi muốn thiết kế một khối văn bản như hình sau:

nhập mô tả hình ảnh ở đây

Câu hỏi liệu điều này là có thể?

html css

— người dùng1780343
nguồn

1

có thể bản sao của văn bản Bao bì xung quanh một hình ảnh với thụt đầu dòng và biện minh

— mavrosxristoforos

Bạn đang cố gắng quấn văn bản xung quanh một hình ảnh như trong các <p>thẻ thông thường , v.v. nhưng bạn cũng đã đề cập <textarea>, đó có thể là một vấn đề hoàn toàn khác. Tại sao bạn không đăng HTML của mình nếu bạn có một số? Cảm ơn bạn.

— Marc Audet

1

Yeah, bạn muốn chỉ nổi hình ảnh php sang bên trái, và văn bản sẽ quấn xung quanh nó :-)

— Jack Tuck

Tất cả những ý kiến và không có câu trả lời được chấp nhận ...

— Dave Kanter

110

bạn có vùng floatchứa hình ảnh của mình như sau:

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

VĨ CẦM

http://jsfiddle.net/kYDgL/

— BeNdErR
nguồn

51

Với CSS Shapes, bạn có thể tiến thêm một bước nữa ngoài việc chỉ nổi văn bản xung quanh một hình ảnh chữ nhật.

Bạn thực sự có thể bọc văn bản sao cho nó có hình dạng như cạnh của hình ảnh hoặc đa giác mà bạn đang quấn nó xung quanh.

DEMO FIDDLE (Hiện đang làm việc trên 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>

Mở rộng đoạn mã

Ngoài ra, đây là một danh sách tốt ngoài bài viết về CSS Shapes

— Danield
nguồn

1

Có tùy chọn nào làm thế nào để bọc "AROUND" đối tượng để đối tượng có thể ở giữa không?

— redestructa

@redestructa kiểm tra các loại trừ CSS. Xem bài đăng của tôi: stackoverflow.com/a/19895616/703717 Nó hiện chỉ được hỗ trợ trong IE - caniuse.com/#feat=css-exclusions

— Danield

20

Bổ sung cho câu trả lời của BeNdErR :
Phần tử "other TEXT" phải có float:none, như:

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

Mở rộng đoạn mã

— T.Todua
nguồn

đây là cách duy nhất tôi có thể làm cho việc này hoạt động .. Và giải pháp sạch sẽ nhất.

— andygoestohollywood

float: không có gì đã cứu tôi! Cố gắng thả nổi: ngay phần tử thứ hai không có kết quả.

— bkunzi01

11

Nếu kích thước hình ảnh có thể thay đổi hoặc thiết kế đáp ứng , ngoài việc gói văn bản, bạn có thể đặt chiều rộng tối thiểu cho đoạn văn để tránh nó trở nên quá hẹp.
Cung cấp một phần tử giả CSS vô hình với chiều rộng đoạn văn bản tối thiểu mong muốn. Nếu không có đủ không gian để vừa với phần tử giả này, thì phần tử giả này sẽ bị đẩy xuống bên dưới hình ảnh, lấy theo đoạn văn.

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

— Jithin B
nguồn

Tôi nghĩ câu trả lời của bạn có thể tiết kiệm cho tôi một số thịt xông khói. Tôi đang gặp sự cố với các hình ảnh nổi bên trái được xếp chồng lên nhau trong một thiết kế đáp ứng. Với chiều rộng hình ảnh mặc định của tôi là 30% và hình ảnh ở cả hai bên, đôi khi tôi có thể có cột văn bản chỉ rộng 4 ký tự.

— Sherwood Botsford