텍스트가 플로팅 div에서 오버플로되지 않습니다.

내가 가장 간단한 것 중 하나에 매달 렸습니다 ... 무엇이 잘못되었으며 내 단락의 텍스트가 버튼 컨테이너를 오버플로하지 않는지 (오른쪽 하단에 있습니다) 래퍼의). 여기텍스트가 플로팅 div에서 오버플로되지 않습니다.

JS 바이올린 링크 : http://jsfiddle.net/8q7cexL9/1/

코드 함께 갈 : 어떤 도움

<div class="what-wrapper"> 
    <div class="what-box"> 
     <h1>What we do</h1> 
     <p class="what-text"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
     </p> 
     <p class="what-text"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit. 
     </p> 
     <div class="button">Explore our facilities</div> 
    </div> 
</div>

CSS

.what-box { 
    border: 1px solid #ededed; 
    padding: 3%; 
    width: 80%; 
    position: relative; 
    margin: 0 auto; 
    border-radius: 15px; 
    overflow: auto; 
} 

h1 { 
    font-size:30px; 
    color:red; 
} 

p.what-text { 
    font-size: 13px; 
    padding: 1% 0; 
} 

.button { 
    font-size: 20px; 
    color: #00396F; 
    border: 1px solid; 
    border-radius: 5px; 
    padding: 2%;  
    float: right; 
}

감사 HTML, E.

전자 : 그것은 보이지 않기 때문에 충분히 명확 : enter image description here

이것이 내가 지향하는 것입니다.

출처

2014-11-27 Entalpia

그래서 오버플로 하시겠습니까? 버튼의 텍스트? .what-box의 버튼 또는 .what-box 자체의 텍스트? –

내 수정 구슬이 나에게 [this] (http://jsfiddle.net/webtiki/8q7cexL9/4/)가 필요하다고 말합니다. –

http://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div의 가능한 복제본 - 이것은 자바 스크립트를 사용하여 가능할 수도 있음을 나타냅니다. – Rhumborl

희망이 있으면 도움이됩니다. 대신

뭐야 창에

position: relative;

의

position: absolute;

. 여기에 링크 http://jsfiddle.net/8q7cexL9/1/

출처

2014-11-27 13:56:25

나는 그것을보고있었습니다. 하지만 텍스트가 길어질 때 겹치기 시작합니다. – Rhumborl

아니요 그런 식으로 행동하지 않습니다. 당신은이 링크에서 그것을 확인할 수 있습니다 http://jsfiddle.net/8q7cexL9/1/ –

이 형식

text text text ------------ 
text text text | button | 
text text text |   | 
text text text ------------ 
text text text text text text 
text ...

이 좋은 형식입니다 텍스트와 이미지를 정렬 할 수 있습니다. 이를 위해 당신은 텍스트가 떴다 요소 후에 나타나는 경우에만 떠 요소는 일반적으로 주위 을 텍스트 랩을 만들 것입니다

http://jsfiddle.net/swapnilmotewar/4adprz48/

출처

2014-11-27 14:11:20

하지만이 방법으로 배열하고 싶지 않습니다 ... 나는 말했습니다, 버튼이 오른쪽 아래 모서리에 있어야합니다. 단락 텍스트가 왼쪽에 오버 플로우되도록하고 싶습니다. – Entalpia

를 확인할 수 있습니다. 이 div는 마크 업 텍스트 뒤에 나타나기 때문에 귀하의 경우에는 텍스트가 div 클래스로 둘러 싸지 않습니다 (버튼 클래스 사용).

텍스트 위로 떠 다니는 요소를 표시하도록 마크 업을 편집하면 문제가 해결됩니다. 예를 들어, 두 번째 단락 앞에 버튼 div를 이동하면 원하는 동작을 얻을 수 있습니다.

스타일을 변경하지 마십시오. 다음과 같이 마크 업을 편집하십시오. 그리고 문제를 해결할 것입니다.

<div class="what-wrapper"> 
    <div class="what-box"> 
     <h1>What we do</h1> 
     <p class="what-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
     <div class="button">Explore our facilities</div> 
     <p class="what-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit.</p> 
    </div> 
</div>

출처

2014-11-27 20:19:42 Vik

텍스트가 플로팅 div에서 오버플로되지 않습니다.

답변

관련 문제