Перекрытие DIV, несмотря на попытку использования clear

Я пытаюсь создать страницу, которая имеет левый столбец, содержащий 5 блоков, правый столбец, содержащий 5 блоков, и центральный столбец как один большой блок. Он отображает ОК на рабочем столе, но на мобильном устройстве это не так. Правые блоки перекрывают основной центральный блок.Перекрытие DIV, несмотря на попытку использования clear

Я только начинаю с этого, поэтому извиняюсь за любые глупые вопросы.

Я пробовал различные комбинации очистки поплавков и изменения поплавков в попытке исправить это, но он просто не будет вести себя так, как я этого хочу.

Любая помощь будет высоко оценена.

Благодаря

Марио

<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, который я рекомендовал бы учиться, как это кажется, что вы новичок. Вот некоторые полезные сайты для веб-разработки:

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, несмотря на попытку использования clear

ответ

Смежные вопросы