이미지를 세로로 아래로 펼칩니다. 공간을 채우기 위해 CSS를 바꿉니다.

Question

이것은 중복 가능성이 높지만, 은 모두 인 것을 찾을 수 없었습니다. 텍스트가 완전히 감싸는 것을 차단하기 위해 이미지 아래에 공간을 채우고 싶습니다. 시각적 인 측면에서 :

 
| /---\ BLAHBLAH 
| |img| blah 
| \---/ blah 
|  blah 
|  blah 
|  ... 

어떻게해야합니까 :

 
| /---\ BLAHBLAH 
| |img| blah 
| \---/ blah 
| blah 
| blah 
| ... 

내가이 원하는 :

나는이 있나요?

Answer 1

당신은 다음과 같이 쓸 수 있습니다 :

<img src="bla.png" style="float:left;" /> 
<div style="overflow:hidden">Some text</div> 

같은 일부 jQuery를 맛 추가

이 부분을 확인하십시오. http://jsfiddle.net/HhJML/

Answer 2

여기에 몇 가지 CSS 속성으로 게임해야 할 수도 있습니다. 예를 들어 이미지의 경우

display:inline-block; 

을 사용해보세요. 또는

float:right; 

텍스트의

이미지 또는 모두

float:left; 

. 심지어 이미지의 테이블을 사용하고 동일한 'TR'나는 생각

Answer 3

에 두 개의 'TD'요소에서 이미지와 텍스트를 추가하는 것이 작업을 수행하는

더 엄격한 방법으로 패딩 바닥을 시도 할 수 있습니다 이

<img src="bla.png" style="float:left;" /> 
<div style="float:right;"><p>Some text</p></div> 

같은 당신이 바로 떠 IMG CSS를 왼쪽으로 플로트와 텍스트를 설정해야합니다 .. 뭔가가 도움이 :)

Answer 4

는 사업부에 추가, 이미지 및 텍스트 모두에 이미지를 플로트 속성을 추가하고 희망 왼쪽으로 정렬하고 div 높이 = 100 %로 설정하십시오. 나는 당신의 HTML 같은 경우는

Answer 5

작동합니다 같아요

<div class="content-container"> 
    <p><img src="whatever" /> text text text text text 
    text text text text text text text text text text text 
    text text text text text text text text text text text 
    text text text text text text text text text text text 
    text text text </p> 
</div> 

만 CSS와 함께 할 수있는 방법은 없습니다.

// Loop through all the images 
$('.content-container img').each(function(){ 
    // Get image height 
    var imageHeight = $(this).height(); 
    // Get container's height 
    var containerHeight = $(this).parent('.content-container').height(); 
    // Set image bottom margin to container's height - image height 
    jQuery(this).css('margin-bottom', (containerHeight - imageHeight) + 'px'); 
}) 

Answer 6

HTML :

<div class="content"> 
    <img src="thumbnail.jpg" width="50" height="50" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....</p> 
</div> 

CSS :

.content { 
    padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */ 
    position: relative; /* So the thumbnail is relative to this */ 
} 

.content img { 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

CSS tip: Float an image without text wrapping under it

Answer 7

테이블을 사용해도 상관 없으면 쉽게 문제를 해결할 수 있습니다.이처럼

: 당신은 당신의 필요 조건에 관해서는 TD의 폭을 설정할 수 있습니다

<table> 
    <tr> 
     <td><img src="yourImage.jpg" alt="" /></td> 
     <td>Your text... blah blah blah..... blah</td> 
    </tr> 
</table> 

의 모든 TD를 만들기 위해 같은 크기를 갖는다.