我正在尝试创建一个页面，该页面的左栏包含 5 个 block ，右栏包含 5 个 block ，中央栏只有一个大块。它在桌面上显示正常，但在移动设备上却没有。右边的 block 与主要的中央 block 重叠。
我才刚刚开始，所以对于任何愚蠢的问题深表歉意。
我已经尝试了多种清除 float 和更改 float 的组合来尝试修复此问题，但它不会像我想要的那样运行。
如有任何帮助，我们将不胜感激。
谢谢
马里奥
<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:info@lufffood.co.uk?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:info@lufffood.co.uk?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:info@lufffood.co.uk?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:info@lufffood.co.uk?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:info@lufffood.co.uk?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:info@lufffood.co.uk?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:info@lufffood.co.uk?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:info@lufffood.co.uk?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:info@lufffood.co.uk?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:info@lufffood.co.uk?subject=QUERY FROM LANDING PAGE">Click Here To Email Us For More Info!</a></div>
</body>
最佳答案
关于html - 尽管尝试使用 clear，但 DIV 重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40795385/