주문, CSS 플로트 대 좌측 및 우측

나는 본질적으로 가지고 (내가 그것을 피할 수 있다면 futz에하고 싶지 않은 끔찍한 PHP 스크립트에 의해 생성 된) 일부 HTML 스타일을 시도하고있다 다음과 같은 구조.주문, CSS 플로트 대 좌측 및 우측

<div class="outer"> 
    <div class="imageContainer"><img src="image42.png" /></div> 
    <h1>The Title String</h1> 
    <div class="description">Lorem ipsum dolor sit amet, ... </div> 
    <div class="details">These are the details...</div> 
</div>

은 내가 div.imageContainer 왼쪽 떠 싶어하고, div.details은 설명 텍스트가 그들 사이에 아래로 흐르는, 바로 떠 (다음에 이미지 아래에있는 설명 텍스트의 많은이 있다면 왼쪽).

다음 CSS는 div.imageContainer과 div.description 권리를 얻을 수 있지만,이 "clear:left" (실제로, 그것은 div.outer 외부 완전히 폭포) 받았던 것처럼보고, 설명의 오른쪽 아래와 div.details을두고 :

.outer   { overflow: hidden; }

이되는를 길게 :

.imageContainer { float: left; } 
.description { width: 50%; } 
.details  { width: 50%; 
        float: right; }

는 여러 가지 다른 게시물의 조언에 따라 나는 추가 시도, SO 여기 발견했습니다을 입력하고 div.details을 포함하지만 div.details은 div.description에 상대적인 동일한 위치에 두십시오.

예제 HTML에서는 div.description 및 div.details 태그의 순서를 교환하면 원하는대로 정확하게 나타납니다. 이는 큰 멀리 예를 간다,하지만 제가 정말 스타일을 원하는 HTML을 생성하는 사용자들은 터무니 끔찍한 PHP 코드의 내장으로 탐구 방지하는 데 도움이되지 않는. : -/

는 CSS와 함께이 작업을 수행 할 수있는 방법이 있습니까?

은 (내가 자바 스크립트/jQuery로 DOM을 바이올린 수 있습니다 실현,하지만 그건 나에게 미봉책 것 같다.)

출처

2012-12-10 Hephaestus

좋아 확인, 그래서. 그러나 CSS 기술과 감성이 발달을 필요로하는 사람으로서, 나는 아직도이 CSS에 대한 순수한 CSS 솔루션이 있는지 알고 싶습니다 ... – Hephaestus

나는 당신의 요청에 대한 JSBin.com에서 sample을 만들었습니다.

샘플에서 나는 div.description 요소에 float:left; 스타일을 적용하고 요소 div.outer에 대한 플로트 클리어. PHP 코드이기 때문에

은 내가 처음에 생각했던대로`div.description`를 이동하기 어렵지 않았다, 소름 끼치는으로 업데이트 된 소스 here

출처

2012-12-11 05:56:24 sureshunivers

슬프게도, 이것은 슬프게도 내가 원하는 것을하지 않고 실제로 예방합니다. 설명 텍스트가 이미지 주위로 흐르지 않습니다. 나는 [JSBin 예제] (http://jsbin.com/exejuq/5)를 설명 텍스트가 실제 길이가 될 때 어떻게 보이는지 보여주고, 또한 실제로 어떻게 보이길 원하는지 보여주기 위해 - 나는 그것을 달성하기 위해, 내 OP에서 언급 한 바와 같이 div의 순서를 바꿔야했지만. (예제를 작성해 주셔서 감사합니다! :-) – Hephaestus

주문, CSS 플로트 대 좌측 및 우측

답변

관련 문제