이미지 아래의 텍스트 배치를 중지하는 CSS

다음 마크 업이 있습니다.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

텍스트가 줄 바꿈되면 이미지의 '열'에 들어 가지 않도록하고 싶습니다. 나는 내가 table(내가하고 있던) 그것을 할 수 있다는 것을 알고 있지만 이것은 이런 이유로 실행할 수 없습니다 .

나는 성공하지 않고 다음을 시도했습니다.

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

나는 또한 시도했다 float: right.

감사.

편집 : 다음과 같이 보이기를 원합니다.

IMG   Text starts here and keeps going... and
      wrap starts here.

이건 아니야:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

이 질문이 많은 의견을 얻고 있으며 이것이 허용 된 답변이기 때문에 다음 면책 조항을 추가해야한다고 느꼈습니다.

이 답변은 OP의 질문 (예제에 너비가 설정되어 있음)에만 해당됩니다. 작동하는 동안 각 요소, 이미지 및 단락에 너비가 있어야합니다. 그것이 귀하의 요구 사항이 아니라면 이 질문에 대한 또 다른 답변으로 게시 된 Joe Conlin의 솔루션 을 사용하는 것이 좋습니다 .

span요소는 인라인 요소, 당신은 CSS의 폭을 변경할 수 있습니다.

다음 CSS를 스팬에 추가하여 너비를 변경할 수 있습니다.

display: block;

일반적으로 더 의미가있는 또 다른 방법은 <p>요소를 <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

이후 <p>A는 block요소는, 당신은 아무것도 변경하지 않고, CSS를 사용하여 폭을 설정할 수 있습니다.

그러나 두 경우 모두 블록 요소가 있으므로 텍스트가 모두 이미지 아래로 내려 가지 않도록 이미지를 플로팅해야합니다.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS 대신의 float:left이미지에, 당신은 또한 넣을 수 있습니다 float:right에 li p있지만, 그 경우에, 당신은 또한이 필요합니다 text-align:left제대로 텍스트를 재정렬 할 수 있습니다.

PSS <p>요소를 추가하지 않는 첫 번째 솔루션을 진행 했다면 CSS는 다음과 같이 보일 것입니다.

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

많은 사람들을 사로 잡는이 문제에 대한 아주 간단한 대답 :

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

예 참조 : http://jsfiddle.net/vandigroup/upKGe/132/

배경 정보를 원하는 사람들을 위해 작동하는 이유를 설명 하는 짧은 기사overflow: hidden 가 있습니다. 소위 블록 형식화 컨텍스트와 관련이 있습니다. 이것은 W3C 사양의 일부이며 (즉, 해킹이 아님) 기본적으로 블록 유형 흐름을 가진 요소가 차지하는 영역입니다.

적용될 때마다 새 블록 서식 컨텍스트를 overflow: hidden만듭니다 . 그러나 그 행동을 촉발 할 수있는 유일한 속성은 아닙니다. Sydney Web Apps Group의 Fiona Chan 의 프레젠테이션 인용 :

• 부동 : 왼쪽 / 오른쪽
• 오버플로 : 숨김 / 자동 / 스크롤
• 디스플레이 : 테이블 셀 및 테이블 관련 값 / 인라인 블록
• 위치 : 절대 / 고정

당신이 원하는 경우 margin-leftA의 작업 span요소 당신은 그것을 확인해야합니다 display: inline-block또는 display:block뿐만 아니라.

display:flex텍스트 설정 은 나를 위해 일했습니다.

이미지와 스팬 주위에 div를 감싸고 다음과 같이 CSS에 다음을 추가합니다.

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

적게

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }