Text Aligned Next To Photo trong CSS

Question

Tôi tự hỏi nếu có cách nào để căn chỉnh văn bản ở bên phải của ảnh, và giữ văn bản trong cùng một "hộp" ngay cả sau khi hình ảnh kết thúc bằng HTML và CSS. Một "sơ đồ" nhanh về những gì tôi đang cố gắng đạt được dưới đây:

------- -------- 
------- -------- 
-Image- - Text - 
------- -------- 
------- -------- 
     -------- 
     -------- 

Cảm ơn bạn đã được trợ giúp!

Answer 1

Nếu bạn đặt chiều rộng trên div văn bản và thả nổi cả Hình ảnh và Văn bản bên trái (phao: bên trái), điều đó sẽ thực hiện thủ thuật. Xóa các phao sau cả hai.

<div style="float:left; width:200px"> 
    <img/> 
</div> 

<div style="float:left; width:200px"> 
    Text text text 
</div> 

<div style="clear:both"></div> 

Answer 2

Đặt văn bản vào một số loại vùng chứa và thả nổi vùng chứa đó bên cạnh hình ảnh nổi. Mẫu mã sau đây sẽ cho bạn ý tưởng:

<img src="..." style="float:left; width: 200px;" /> 

<div style="float:left; width: 400px;"> 
    <p>Bla bla...</p> 
    <p>Bla bla...</p> 
    <p>Bla bla...</p> 
</div> 

Nếu bạn cần một số thùng chứa khoảng hai yếu tố để tự động phù hợp với chiều cao của nó lên mức cao nhất trong hai yếu tố nổi, bạn có thể đặt một overflow: hidden trên container. Để làm cho nó hoạt động trong IE6 là tốt, bạn sẽ cần phải quay trở lại đó để overflow: auto và thêm một cái gì đó kì quái như height: 1px.

Answer 3

Bạn thường sẽ tạo thành phần div hoặc p cho văn bản và cung cấp cả hình ảnh và văn bản float: left. Việc triển khai chính xác phụ thuộc vào các tham số khác như độ rộng cố định, Giao diện của bạn trông như thế nào, v.v.

Answer 4

DEMO:http://jsbin.com/iyeja/5

<div id="diagram"> 
      <div class="separator"></div> 
      <div class="separator"></div> 

      <div id="text_image_box"> 
       <span class="image"><img src="http://l.yimg.com/g/images/home_photo_megansoh.jpg" alt="" /></span><span class="text"><p>some text</p></span> 
       <div class="clear"></div> 
      </div> 

      <div class="separator"></div> 
      <div class="separator"></div> 
      <div class="separator"></div> 
      </div> 

    <style> 
     /* JUST SOME FANCY STYLE*/ 
     #diagram { 
     width:300px; 
     border:1px solid #000; 
     padding:10px; 
     margin:20px; 
     } 

     .separator { 
     height:2px; 
     width:300px; 
     border-bottom:1px dashed #333; 
     display:block; 
     margin:10px 0; 
     } 

     /* MAIN PART */ 
     #text_image_box { 
     width:300px; 
     margin:0 auto; 
     padding:0 
     } 

     .image { 
     float:left; 
     width:180px; 
     height:300px; 
     overflow:hidden; 
     margin:0 auto; 
     } 
     .text { 
    float:right; 
    width:100px; 
    padding:0; 
    margin:0 auto; 
    } 
    .text p { 
    margin:0; 
    padding: 0 5px; 
    } 
     .clear { 
     clear:both 
     } 
     </style>