html CSS 레이아웃이 의도 한대로 렌더링되지 않습니다.

Question

반응 형 웹 페이지를 만들고 있습니다.

이것은 내가하려는 일입니다. 바탕 화면보기에서

<div id="container"> 
    <div id="one">#one</div> 
    <div id="two">#two</div> 
    <div id="three">#three</div> 
    <div id="four">#four</div> 
    <div id="five">#five</div> 
</div> 

jsfiddle 나는 #three의 하단을 터치 #five를 원한다.

화면 크기를 작게 만들면 (모바일보기) div가 올바르게 정렬됩니다.

#five#three의 하단을 데스크톱보기에서 어떻게 만듭니 까?

Answer 1

#five에서 제거 float: right 및 추가 overflow: hidden

#five { 
    width:200px; 
    height:70px; 
    background:#368736; 
    overflow: hidden; 
} 

#container { 
 
    max-width:500px; 
 
    width:100%; 
 
    color: #fff; 
 
} 
 
#one { 
 
    width:300px; 
 
    height:200px; 
 
    background:#66BCD9; 
 
    float:left; 
 
} 
 
#two { 
 
    width:200px; 
 
    height:50px; 
 
    background:#A1A6E6; 
 
    float:right; 
 
} 
 
#three { 
 
    width:200px; 
 
    height:50px; 
 
    background:#E3A1E6; 
 
    float:right; 
 
} 
 
#four { 
 
    width:300px; 
 
    height:100px; 
 
    background:#ED5894; 
 
    float:left; 
 
} 
 
#five { 
 
    width:200px; 
 
    height:70px; 
 
    background:#368736; 
 
    overflow: hidden; 
 
}

<div id="container"> 
 
    <div id="one">#one</div> 
 
    <div id="two">#two</div> 
 
    <div id="three">#three</div> 
 
    <div id="four">#four</div> 
 
    <div id="five">#five</div> 
 
</div>