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

106

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

여기에 이미지 설명 입력

이것이 가능한지 질문?

html css

— user1780343
소스

1

가능한 중복 들여 쓰기 이미지의 주위에 포장 텍스트와 정당화

— mavrosxristoforos

일반 <p>태그 등에서와 같이 이미지 주위에 텍스트를 감싸려고 하지만 <textarea>완전히 다른 문제가 될 수있는을 언급했습니다 . HTML이 있다면 왜 게시하지 않습니까? 감사합니다.

— Marc Audet 2013 년

1

예, PHP 이미지를 왼쪽으로 띄우면 텍스트가 그 주위를 둘러 쌉니다. :-)

— Jack Tuck

이러한 의견없이 허용 대답 ... 모든

— 데이브 캔터

110

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/

— BeNdErR
소스

51

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에 대한 좋은 목록 이 있습니다.

— Danield
소스

1

개체가 중간에있을 수 있도록 개체를 "둘러싸는"방법이 있습니까?

— redestructa

CSS exclusions.See 내 게시물을 확인 @redestructa : stackoverflow.com/a/19895616/703717 그것은 현재는 IE에서 지원되는 것 - caniuse.com/#feat=css-exclusions

— Danield

20

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>

스 니펫 확장

— T. 토 두아
소스

이것이 내가 이것을 작동시킬 수있는 유일한 방법이다. 그리고 가장 깨끗한 해결책.

— andygoestohollywood

float : 아무도 나를 구한 것이 아닙니다! 두 번째 요소를 사용하지 않으려면 계속 플로팅을 시도했습니다.

— bkunzi01

11

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

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

— 지틴 B
소스

당신의 대답이 베이컨을 좀 구할 수있을 것 같아요. 반응 형 디자인에서 왼쪽 떠 다니는 이미지가 쌓이는 데 문제가있었습니다. 내 기본 이미지 너비가 30 %이고 이미지가 양쪽에있는 경우, 때로는 너비가 4 자에 불과한 텍스트 열을 가질 수 있습니다.

— Sherwood Botsford