Gói văn bản xung quanh một div vị trí tuyệt đối

Question

Tôi biết có một vài câu hỏi về các chủ đề tương tự nhưng chủ yếu là số tiền để thả div/hình ảnh. Tôi cần phải có hình ảnh (và div) vị trí hoàn toàn (tắt bên phải) nhưng tôi chỉ đơn giản muốn dòng văn bản xung quanh nó. Nó hoạt động nếu tôi nổi div nhưng sau đó tôi không thể định vị nó ở nơi tôi muốn. Vì nó là văn bản chỉ chảy phía sau hình ảnh.

<div class="post"> 
      <div class="picture"> 
    <a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s picture" title="neatktp&#039;s picture" /></a></div> 
     <span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p> 
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p> 
     </div> 

là một ví dụ về HTML

với CSS phúc:

.picture img { 
     background: #fff; 
     border: 1px #ddd solid; 
     padding: 2px; 
     float: right; 
} 

.post .picture { 
    display: block; 
    height: auto; 
    position: absolute; 
    right: -10px; 
    top: -10px; 
    width: auto; 
} 

.post { 
    border: 1px solid #FFF; 
    border-bottom: 1px solid #e8ebec; 
    padding: 37px 22px 11px; 
    position: relative; 
    z-index: 4; 
} 

Đó là một chủ đề Drupal nên không ai trong số mã này là của tôi, nó chỉ là nó không hoàn toàn làm việc khi nó đến để đặt một bức tranh ở đó.

Answer 1

Định vị tuyệt đối đưa phần tử ra khỏi luồng tài liệu bình thường và do đó nó không tương tác với các phần tử khác. Có lẽ bạn nên revist làm thế nào để vị trí nó bằng cách sử dụng phao thay vào đó, và hỏi về nó ở đây trên Stack tràn nếu bạn gặp khó khăn :)

Answer 2

Định vị tuyệt đối không cho phép bạn quấn văn bản. Bạn phải sử dụng phao và vị trí bằng lề hoặc đệm.

Answer 3

Khi bạn vị trí một div hoàn toàn, bạn có hiệu quả lấy nó ra khỏi dòng tài liệu, vì vậy các yếu tố khác sẽ hoạt động như thể nó không có ở đó.

Để làm được việc này, bạn có thể sử dụng thay vì lề:

.myDivparent 
{ 
    float: left; 
    background: #f00; 
} 

.myDivhascontent 
{ 
    margin-left: 10px; /*right, bottom, top, whichever you need*/ 
} 

Hy vọng rằng sẽ làm các trick :)

Answer 4

Trong opinon của tôi, "Tuyệt đối" đặc điểm là kém tên, bởi vì vị trí của nó thực sự liên quan đến vị trí của người cha mẹ đầu tiên không phải là tĩnh

<div class="floated"> 
<div style="position: relative;"> 
    <div class="AbsoluteContent"> 
    stuff 
    </div> 
</div> 
</div> 

Answer 5

Như đã đề cập bởi @Kyle Sevenoaks, bạn đang lấy nội dung vị trí tuyệt đối trong tài liệu lưu lượng.

Theo tôi có thể thấy, cách duy nhất để có nội dung chính xác vị trí tuyệt đối là sử dụng javascript để đặt chiều rộng và chiều cao cho mỗi thay đổi.

Answer 6

Tôi biết đây là một câu hỏi cũ nhưng tôi bắt gặp nó để tìm kiếm những gì tôi tin rằng bạn đang cố gắng. Tôi đã thực hiện một giải pháp bằng cách sử dụng: trước khi chọn CSS, do đó, nó không phải là tuyệt vời với ie6-7 nhưng ở khắp mọi nơi khác, bạn nên được tốt.

Về cơ bản, đặt hình ảnh của tôi trong div Tôi có thể thêm khối nổi điều dài trước khi chạm tay và vuốt văn bản vui vẻ xung quanh nó!

img { 
    float:right; 
    clear:both; 
    width: 50% ; 
    margin: 30px -50px 10px 10px ; 
} 
.rightimage:before { 
    content: '' ; 
    display:block; 
    float: right; 
    height: 200px; 

} 

Bạn có thể kiểm tra xem nó ra ở đây:

http://codepen.io/atomworks/pen/algcz

Answer 7

Tôi nghĩ rằng lựa chọn tốt nhất là thêm một div bổ sung sau khi nội dung float, nhưng vẫn còn bên phụ huynh để xóa phong cách trước đó.

<div class="clear"></div> 

Và CSS:

.clear 
{clear:both;} 

Answer 8

Dưới đây là một thủ thuật mà có thể làm việc cho một số:

nếu bạn có một container đóng gói với rất nhiều đối tượng, và bạn muốn rằng đối tượng vị trí tốt để xuất hiện tăng cao trong một số trường hợp nhất định và xuống thấp hơn trong các trường hợp khác (ví dụ: kích thước màn hình khác nhau), sau đó chỉ cần sao chép các đối tượng nhiều lần trong html của bạn, hoặc inline(-block) hoặc với float và sau đó display:none các mục bạn không muốn xem theo các điều kiện bạn cần.

Đây là một JSFiddle để hiển thị chính xác những gì tôi muốn nói: JSFiddle of right positioning high and low

Lưu ý: tôi đã thêm màu sắc chỉ cho có hiệu lực. Ngoại trừ tên lớp, các chủ đề-1 và chủ đề-2 là các bản sao chính xác của nhau.

Answer 9

Có cách khắc phục dễ dàng cho sự cố này. Nó sử dụng không gian trắng: nowrap;

<div class="position:relative"> 
<div style="position: absolute;top: 100%; left:0;"> 
    <div style="white-space:nowrap; width: 100%;"> 
    stuff 
    </div> 
</div> 
</div> 

Ví dụ tôi đã thực hiện một menu thả xuống cho một hướng nên thiết lập tôi đã sử dụng là

<ul class="submenu" style="position:absolute; z-index:99;"> 
    <li style="width:100%; display:block;"> 
     <a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a> 
    </li> 
<ul> 

Hình ảnh Ví dụ

Without Nowrap enabled

With Nowrap enabled

Ngoài ra nếu bạn vẫn không thể tìm ra nó t các trình đơn thả xuống trên các mẫu khởi động mà bạn có thể google. Sau đó, tìm hiểu cách họ làm việc vì họ đang sử dụng vị trí tuyệt đối và nhận được văn bản để chiếm 100% chiều rộng mà không cần gói văn bản.