HTML / CSS를 사용하여 이미지 주위에 텍스트를 감싸는 방법

HTML / CSS를 사용하여 이미지 주위에 텍스트를 감싸는 방법

---

다음 그림과 같은 텍스트 블록을 디자인하고 싶습니다.

( https://docs.google.com/file/d/0B8gEuF9U3SaENzNsOTdxMmV3Ykk/edit?usp=sharing )

이것이 가능한지 질문?

---

float다음과 같이 이미지 컨테이너에 있어야 합니다.

HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

깡깡이

http://jsfiddle.net/kYDgL/

---

CSS Shapes 를 사용하면 직사각형 이미지 주위에 텍스트를 띄우는 것보다 한 단계 더 나아갈 수 있습니다.

실제로 감싸는 이미지 또는 다각형의 가장자리 모양을 취하도록 텍스트를 감싸는 것이 가능합니다.

데모 FIDDLE (현재 웹킷 작업 중 -caniuse )

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

또한 여기 에 CSS Shapes에 대한 좋은 목록 이 있습니다.

---

BeNdErR 의 대답에 추가 :
"other TEXT"요소는 다음 float:none과 같이 있어야합니다 .

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text 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>
    </div>

---

경우 이미지 크기가 변수 또는 설계는 응답 텍스트를 포장하는 것 외에도, 당신은 설정할 수 있습니다 단락에 대한 최소 폭을 너무 될 좁혀 피하기 위해.
원하는 최소 단락 너비로 보이지 않는 CSS 의사 요소를 제공하십시오. 이 가상 요소에 맞는 공간이 충분하지 않으면 이미지 아래로 눌러 단락을 가져옵니다.

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

참고 URL : https://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css