HTML 및 CSS에서이 작업을 수행하는 방법은 무엇입니까?

-4

이미지 나 아이콘이 왼쪽으로 이동하고 세부 정보가 왼쪽으로 이동 한 경우HTML 및 CSS에서이 작업을 수행하는 방법은 무엇입니까?

그림자가있는 DIV가 내용을 감싸고 있지 않는 문제가 있습니다.

어떻게 하시겠습니까?

Screenshot: Problem

편집 HTML의 구조는 다음과 같습니다

<div "shadowed one"> // no overflow: auto; but it doesn't have any effect +/- overflow 
    <div "+/- overflow: auto"> 
    <div "floating left">Icon</div> 
    <div "floating left">Details</div 
    <div> 
</div>

출처

2012-07-04 The Black Sandal

사용을'명확 : 수레를 취소 both'은 (단지 컨테이너에 추가 요소를 추가 그 스타일) –

나는'overflow : auto'가 설정되었을 때 내용이 잘려나 가기 때문에 정리 문제라고 생각하지 않습니다. – Quentin

stackoverflow 커뮤니티에 액세스 권한이없는 코드를 수정하는 것이 바람직하지 않다고 생각합니다. – Quentin

는 이미 설정된 높이가 마술 주위에 맞게 실 거예요 경우

shaddowed의 DIV의 높이와 패딩을 변경해보십시오 내용

출처

2012-07-04 16:28:27 kezi

으로 가져 가세요. 그림자가있는 div에 높이가 설정되어 있지 않습니다. –

당신이하는 모든 항목이 "해리 포터 시리즈"와 비슷하다면 주위에서 잘 작동하는 높이를 알아내는 것이 좋습니다. – kezi

또는 바닥에 패딩 추가 – kezi

JS Fiddle에 샘플을 생성했습니다.

두 부서를 플로팅하는 대신 이미지를 플로팅하고 설명에 여백을 추가하십시오.

는

출처

2012-07-04 16:31:18 Fenton

Opera에서 버그가있는 것 같습니다. – Styxxy

이미지 (왼쪽)가 설명 (오른쪽)보다 높을 때 작동하지 않습니다. – Florent

그 중 하나가 작동하지 않습니다. 결과는 여전히 2입니다. –

당신은 clearfix 트릭이나 CSS 속성 clearfix와 clear: both

예 사용을 고려할 수 있습니다

<!-- Clearfix on the parent div --> 
<div class="shadowed one clearfix"> 
    <!-- Floating divs with different height --> 
    <div class="floating left">Icon</div> 
    <div class="floating left">Details</div> 
</div>

출처

2012-07-04 16:35:45 Florent

모든 본문은 clearfix 또는 Clear : Both를 사용하려고합니다. 하지만 어디에서 사용할 수 있습니까? 첫 번째 또는 두 번째 부문에서? –

clearfix 예제 추가 – Florent

HTML 및 CSS에서이 작업을 수행하는 방법은 무엇입니까?

답변

관련 문제