重疊DIV儘管試圖使用清除

我想創建一個頁面，其中有一個左列包含5個塊，一個右列包含5個塊和一箇中央列作爲一個大塊。它在桌面上顯示確定，但在移動設備上不顯示。右側的塊與主中央塊重疊。重疊DIV儘管試圖使用清除

我剛剛開始與此，所以道歉任何愚蠢的問題。

我已經嘗試了清理浮動和更改浮動的各種組合嘗試嘗試修復此問題，但它不會像我想要的那樣運行。

任何幫助將不勝感激。

感謝

馬里奧

<style type="text/css"> 
    <!-- 
    body { 
     width:100%; 
     color:#000000; 
     background-color:#FFFFFF; 
     background-image:url('Background Image'); 
     background-repeat:no-repeat; 
    } 
    a { color:#602e91; } 
    a:visited { color:#800080; } 
    a:hover { color:#008000; } 
    a:active { color:#FF0000; } 

#blocks { 
    width:90% 
    margin:auto; 
    background-color: #ffffff; 
} 
#MainLeftBlock1 { 
    height:100%; 
    width:20%; 
    float: left; 
} 
#LBlock1 { 
    height:20%; 
    width:100%; 
    float: left; 
} 
#LBlock2 { 
    height:20%; 
    width:100%; 
    float: left; 
} 
#LBlock3 { 
    height:20%; 
    width:100%; 
    float: left; 
} 
#LBlock4 { 
    height:20%; 
    width:100%; 
    float: left; 
} 
#LBlock5 { 
    height:20%; 
    width:100%; 
    float: left; 
} 

#MainCentreBlock { 
    height:100%; 
    width:60%; 
float:left; 
} 
#MainRightBlock3 { 
    height:100%; 
    width:20%; 
float:right; 
} 
#RBlock4 { 
    height:20%; 
    width:100%; 
    float: right; 
} 
#Rblock5 { 
    height:20%; 
    width:100%; 
    float: right; 
} 
#Rblock6 { 
    height:20%; 
    width:100%; 
    float: right; 
} 
#Rblock7 { 
    height:20%; 
    width:100%; 
    float: right; 
} 
#Rblock8 { 
    height:20%; 
    width:100%; 
    float: right; 
} 
    --> 
    </style> 
    <!--[if IE]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
<div id="blocks"> 
    <div id="MainLeftBlock1"> 
    <div align="middle" id="LBlock1"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/mcdonaldslogo.jpg" width="100%" height="100" alt="" title="" align="middle" /></a></div> 
    <div align="middle" id="LBlock2"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/faroukstandoorilogo.png" width="100" height="100" alt="" title="" align="middle" /></a></div> 
    <div align="middle" id="LBlock3"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/donellislogo.jpg" width="100%" height="100" alt="" title="" align="middle" /></a></div> 
    <div align="middle" id="LBlock4"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/hogstoplogo.jpg" width="120" height="100" alt="" title="" align="middle" /></a></div> 
    <div align="middle" id="LBlock5"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/paradiselogo.jpg" width="150" height="100" alt="" title="" align="middle" /></a></div> 
    </div> 

    <div align="middle" id="MainCentreBlock"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/lufffoodlogo2.jpg" width="750" height="494" alt="" title="" align="middle" /></a></div> 

    <div id="MainRightBlock3"> 
    <div align="middle" id="RBlock4"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/kfclogo.jpg" width="100%" height="100" alt="" title="" align="middle" /></a></div> 
    <div align="middle" id="Rblock5"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/planburritologo.jpg" width="100" height="100" alt="" title="" align="middle" /></a></div> 
    <div align="middle" id="Rblock6"><a href="mailto:[email protected]?subject=QUERY FROM LANDING PAGE"><img src="http://www.lufffood.co.uk/img/delhibiteslogo.jpg" width="100%" height="100" alt="" title="" align="middle" /></a></div> 
    <div align="middle" id="Rblock7"></div> 
    <div align="middle" id="Rblock8"></div> 
    </div> 

    </div> 

    <div align="middle"><img src="http://www.lufffood.co.uk/img/AvailableNowHome.png" align="middle" /></div> 
<div align="middle"><a href="mailto:[email protected]?subject=QUERY FROM  LANDING PAGE">Click Here To Email Us For More Info!</a></div> 

     </body>

來源

2016-11-24 Mario De Rosa

爲了響應式設計（移動和桌面版本）。使用媒體查詢來代替：

2016-11-24 22:55:42 RizkiDPrast

我已經使用flexbox method我建議學習，因爲它好像你是一個初學者創建的代碼。下面是Web開發的一些有用的網站：

css-tricks
W3 Schools

body{ 
 
    background-color: grey; 
 
} 
 
main{ 
 
    display: flex; 
 
} 
 
aside{ 
 
    flex:2; 
 
} 
 
aside div { 
 
    background-color:white; 
 
    margin: 10px; 
 
} 
 
section{ 
 
    flex:5; 
 
} 
 
section div { 
 
    margin:10px; 
 
    background-color: white; 
 
}

<main> 
 
    <aside><!-- left --> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    </aside> 
 
    <section> 
 
    <div>Center</div> 
 
    </section> 
 
    <aside><!-- right --> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    </aside> 
 
</main>

來源

2016-11-24 23:32:24 JSouthward

重疊DIV儘管試圖使用清除

回答

相關問題