Question

我正在尝试创建一个页面，其中左列包含5个块，右列包含5个块，中间列只作为一个大块。它在桌面上显示OK，但在移动设备上则不显示。右侧块与主要中央块重叠。

我刚刚开始这样做，所以道歉任何愚蠢的问题。

我尝试了各种清除浮动和更改浮动的组合，试图尝试修复此问题，但它不会像我想要的那样表现。

非常感谢任何帮助。

由于

马里奥

    <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>

Answer 1

制作响应式设计（移动和桌面版）。改为使用媒体查询：

css-trick

mdn

w3schools

Answer 2

我使用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>

尽管尝试使用清晰的重叠DIV

2 个答案: