다음 마크 업이 있습니다.
<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-left
A의 작업 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%;
}
}