div 주위에 떠있는 텍스트

다른 시나리오에서 이미지 주위에 텍스트가 흐르도록하려고합니다. 이미지가 내용 내부에 있지 않습니다. 이미지는 별도의 구성 요소가 될 것이며 텍스트가있는 div는 별도의 구성 요소가됩니다. 그래서 마크 업 시나리오는 우리가 마크 업을 변경하지 못할 것입니다이div 주위에 떠있는 텍스트

<img class="imgtofloat" src="images/1.png" alt="" /> 
<div class="divwithcontent"> 
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p> 
</div>

모양을하지만 우리는 콘텐츠와 이미지를 배치하고 그 주위 컨텐츠 플로트를 확인해야합니다.

편집 1 : 는 나는이 이미지 https://www.flickr.com/photos/[email protected]/14477076543/

출처

2014-06-19 Rajasekar

http://www.homeandlearn.co.uk/WD/wds4p6.html 여기에 대답 –

관련 질문을 얻을 것이다이 링크를 확인하십시오 http://stackoverflow.com/questions/7017465/centering-를 단락 이미지 - –

마크 업을 99.9 % 긍정적으로 생각하면 마크 업을 변경하지 않으면이 작업을 수행 할 수 없습니다. 여백/패딩이 진행됨에 따라 이미지를 이동하고 텍스트가 맨 위를 떠 다니게 할 방법이 없습니다. 이렇게하려면'p' 태그 안에'img' 태그를 넣어야합니다. – David

우리는 우리의 CSS 상상력을 늘릴 수에서와 같이 컨텐츠의 중앙에 이미지를해야합니다. 이미지를 숨기고 배경으로 바꿉니다.

예제, 아마도 적용 가능.

Have a fiddle!

img { 
    display: none; 
} 
p:first-child:after { 
    content: ""; 
    display: block; 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: url(http://www.placehold.it/100) no-repeat; 
    margin: 20px; 
}

출처

2014-06-19 07:22:08 misterManSam

이미지의 가운데 부분에 이미지가 있어야합니다 (https://www.flickr.com/photos)./41695354 @ N08/14477076543/ – Rajasekar

편집 내 대답. 이건 재미 있네. – misterManSam

고정 바이올린 링크 – misterManSam

하면 이미지의 위치를 변경 할 수있는 경우 CSS. 1) 단락 텍스트 사이에 이미지를 넣습니다. 2 단계) img 태그의 하나의 속성 align = "left"

출처

2014-06-19 07:34:08 user45205

http://jsfiddle.net/5VG87/ – user45205

CSS 규칙이 몇 개있는 경우 인라인 스타일을 사용할 수도 있습니다.

<img src="images/1.png" alt="" style="float: left" />

출처

2014-06-19 07:39:26

div 주위에 떠있는 텍스트

답변

관련 문제