오른쪽 하단 div 주위에 텍스트를 줄 바꿈하려면 어떻게해야합니까?

오른쪽 하단 div 주위에 텍스트를 줄 바꿈하려면 어떻게해야합니까?

---

CSS에서 간단 해 보이는 작업을 시도 할 때마다 작동하지 않습니다.

460x160 이미지가 포함 된 콘텐츠 div가 있습니다. 내가 원하는 것은 이미지를 오른쪽 하단 모서리에 배치하고 그 주위에 텍스트를 감싸는 것입니다.

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

그래서 다음과 같이 보이기를 원합니다.

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

왼쪽 상단 또는 오른쪽 상단 이미지로 수행하는 것은 케이크입니다.

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

이제 어떻게 바닥으로 밀어 넣을까요? 내가 지금까지 생각 해낸 최고는 다음과 같습니다.

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

이 경우 텍스트가 여백에 인쇄되지 않으므로 이미지 위에 공백이 있습니다.

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

이 경우 텍스트는 이미지 위 또는 아래에 인쇄됩니다.

그래서 .. 어떻게하면 되나요?

---

이전 (2003) , 이전 (2002) 또는 이전 (2005) 이전 에 요청 된 것 같습니다.

마지막 링크는 실제로 자바 스크립트 기반 솔루션을 제안 하지만 고정 된 (즉, 유동적이지 않은) 솔루션입니다.

그러나 다른 조언 과 일치 합니다.

이를 수행하는 유일한 방법은 텍스트 중간에 플로팅 요소를 배치하는 것입니다. 항상 완벽하게 만드는 것은 불가능합니다.

또는 이거 :

수직 "푸셔"요소 (예 : img,하지만 빈 div를 사용하는 것이 더 현명 할 수 있음)를 플로팅 한 다음 clear 속성을 사용하여 원하는 객체를 그 아래에 플로팅하는 것으로 구성됩니다. 이 방법의 주요 문제점은 여전히 ​​텍스트 줄이 몇 줄인지 알아야한다는 것입니다. 그것은 일을 훨씬 더 쉽게 만들고 자바 스크립트로 확실히 코딩 할 수 있습니다. "푸셔"의 높이를 컨테이너 높이에서 플로트 높이를 뺀 값으로 변경하면됩니다 (컨테이너가 고정 / 최소 높이가 아니라고 가정) .

어쨌든, 이 스레드에서 논의한 것처럼 쉬운 해결책은 없습니다.

---

Cletus 는 2003 년 부터이 스레드에 대해 언급하며 쉽게 달성 할 수 없다는 사실을 다시 한 번 언급합니다 .
그러나이 Eric Meyer의 기사를 참조 하며 달성하려는 효과에 가깝습니다.

플로트와 일반 흐름이 서로 어떻게 관련되어 있는지 이해하고 플로트 주변의 일반 흐름을 조작하는 데 클리어링을 사용하는 방법을 이해함으로써 작성자는 플로트를 매우 강력한 레이아웃 도구로 사용할 수 있습니다.
플로트는 원래 레이아웃에 사용하기위한 것이 아니기 때문에 의도 한대로 작동하도록하려면 일부 해킹이 필요할 수 있습니다. 여기에는 부동 요소, "지우기"요소 또는 둘의 조합이 포함 된 부동 요소가 포함될 수 있습니다.

---

그러나 Chadwick Meyer 는 그의 대답 에서 :beforeCSS 선택자 ( Leonard 의 대답 의 변형)를 기반으로 한 솔루션을 제안 합니다.
그것은 않습니다 여기서 일 .

---

글쎄 ... 이것은 꽤 오래된 게시물이지만 작은 해결 방법으로 어려움을 겪고 해결했습니다. 이미지를 오른쪽에 정렬하고 상단에서 정확히 170px로 정렬해야했습니다. 그리고 이미지의 상단, 왼쪽 및 하단에 텍스트가 흐르도록해야합니다. 그래서 제가 한 것은 너비가 0px이고 높이가 170px이고 오른쪽으로 떠있는 것을 만드는 것입니다. 그런 다음 img가 뜨고 맑아집니다.

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
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 text text text text text
text text text text text text

꽤 잘 했어 :)

---

내가 찾은 가장 간단한 해결책은 div 요소 안에 img를 래핑 한 다음 padding-top 및 margin-bottom 값을 사용하여 정렬하는 것입니다.

이것은 내 CSS입니다

.contentDiv  .bottomRight img{
  height: 130px;
  float:right;
  padding-top: 60px;
  margin-bottom: -10px;
  }

여기에 HTML이 있습니다.

<div class="contentDiv">
 <h1>If you are seeing this and reading it, then all is working well.</h1>
 <div class="bottomRight">
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
 </div>
</div>

The reason padding and margin worked for me is because I use it inside the parent element "contentDiv" to auto adjust height of the div according to the content. Not sure if its of any use.

---

For a jQuery solution, try the lowFloat plugin created by gilly3: https://github.com/gilly3/lowFloat

---

Further to the solution posted, I've used a quick JQuery hack to dynamically adjust the height of the pusher, by taking the height of the area I wanted to bottom-right align away from the height of the content area, and applying it to the pusher div, as so:

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

It needs a few slight tweaks, but generally works as well as you're going to get!

---

The solution I found involves that you have a div whose width does not changes, nor does the amount of text. Then you can position the image inside the text and have it align=right. So if you have correct amount of text around it, then you you get the image on the right and at the bottom of the div.

    <style >
#contents{
    border: 2px solid red;
    background: #ddd;
    position: absolute;
    width:600px;
}



</style>
<div id="contents">
    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 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 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 ...    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 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 ...  <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
    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 text text ...    text text text text text text ...    text text text text text text ...
     hey hey 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>

---

Ok. So I've actually had this same problem and at some point the answer hit me like Saturday night cheese cake. It's almost the same hit and miss effect that you have when you try to set text wrapping in Word.

img.right {
     float: right;
}

Now all you have to do is just set it INSIDE the text where you want the lines to break. The text will float to the end of the text so it will always push the text to the left but if you put the image in the middle of the text like...

<p>This is some text <img src="example.jpg" class="right" /> and then add
some more text.</p>

the top part stays where it is and text is free to float above the image and the rest is pushed to the left of the image. It's a workaround but not nearly as tedious as using JS and if you use a WYSIWYG editor it's even easier. Come to think of it if you use a WYSIWYG editor it has that feature automatically. :P Problem solved.

Cheers.

ReferenceURL : https://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div