하나의 컨테이너에 두 개의 60 % 요소가 있습니다

Question

특정 웹 사이트에서 단일 포스트 프레젠테이션 디자인을 (일종의) 복사하려고합니다.

(antyweb.pl)

는 분명히 그들이 사용하는 "A"요소와 이미지가 배경이다 : 여기처럼 보이는 방법이다. 어쨌든 우리가 볼 수없는 더미 텍스트를 넣어야하므로이 아이디어가 마음에 들지 않습니다.

이 시점에서

- 제가 그것을하고 싶은 방법을 보여 보자

는 내가 가지고있는 것은 용기로 사용 article 요소입니다. 내부에는 img의 최대 너비와 61.8033988749854683%으로 설정된 div의 너비가있는 두 개의 다른 요소가 있습니다.

div와 이미지가 헤더의 바로 아래에 같은 높이로 표시되도록하려면 어떻게해야하나요?

지금까지 크기가 조정되는 동안 또는 이미지보다 더 높은 높이가되도록 충분한 텍스트가있는 경우 div 아래에 내용이 겹쳐져있어 실패했습니다. 사전에

감사합니다, 많은 사랑

-edit 1

첫번째 fiddle.

-edit 2

다른 컨테이너는이 속한 곳 텍스트를 얻기 위해 추가 : http://jsfiddle.net/MM5hs/6/

Answer 1

당신에게 : 이제 어떻게 첫 번째 기사에서 텍스트가 다른 기사 겹치는 것이 무엇 http://jsfiddle.net/MM5hs/5/

floats을 사용할 수 있습니다.

FIDDLE

HTML :

<article> 
     <header> 
      <h2><a href="#">Header</a></h2> 
     </header> 
     <div name="topline"> 
      <div class="img_wrap"> 
       <img src="http://cdn.desktopwallpapers4.me/wallpapers/animals/1920x1200/1/3634-kitten-1920x1200-animal-wallpaper.jpg" /> 
      </div> 
      <div name="content"> 
       <p>... content ...</p> 
      </div> 
     </div> 
     <div class="auth"> 
      <span>Author: 
       <a href="#" title="zobacz wszystkie posty tego autora">me</a>, 
       <time datetime="2014-04-04T01:48:23+00:00">2014-04-04T01:48:23+00:00</time> 
      </span> 
     </div> 
    </article> 

CSS :

article { 
    width: 50%; 
    margin: auto; 
} 
div[name*="topline"] { 
    position:relative; 
} 
div[name*="content"] { 
    max-width: 61.8033988749854683%; 
    margin-left: 38.1966011250145317%; 
} 
.img_wrap { 
    width:38.1966011250145317%; 
    float:left; 
    overflow:visible; 
} 
article img { 
    width: 150%; 
} 
.auth { 
    clear:both; 
}