DEM0：http://jsbin.com/AKopuGo/1/

Question

我正在制作一个主页，它在我的分辨率中效果很好，但如果我尝试调整窗口大小，则不同的徽标（div）会开始相互重叠。

这应该是它的样子：

但每当我调整窗口大小时，徽标（div /图片）都会重叠。

我有很多代码，我认为这与问题无关，但以防万一，这是jsfiddle的完整代码（图片/字体不起作用）：http://jsfiddle.net/sXy3u/

否则，这是每个div的代码示例，我相信您需要提供帮助：

<div id="youtube">
    <a href="http://www.youtube.com/"><img src="youtube.png"/></a>
    <a href="http://www.youtube.com/">
        <div id="youtubeHover">
        <div id="youtubeCircle">
            <div id="youtubeArrow">
                &nbsp;
            </div>
        </div>
        </div> 
    </a>
</div>

这是其中一个瓷砖的一个例子。现在有两个css代码：

#youtube {
    width: 195px;
    height: 195px;
    margin-top: 5px;
    padding-top: 5px;
    position: relative;
    overflow: hidden;
}

那个重叠的那个：

#yahoo {
    margin-top: -810px;
    margin-left: 600px;
    width: 195px;
    height: 195px;
    position: relative;
    overflow: hidden;
}

Answer 1

这是您必须使用网格系统的地方 Link

它为您提供响应式布局，具体取决于您的屏幕，如手机，iPad，1024x768或高清宽屏。因此，如果您使用网格系统，则无需重新编码大量的CSS。只需几乎不用编码就可以在HTML部分中附加每个Metro Style Box。

我猜你不知道网页中的网格系统。没问题。我会给你一些基本的教程链接。看看。Link

这个one现在是Web行业中可用的网格系统。看看吧。

如果你使用网格系统这个概念，你会惊讶：）

Answer 2

您需要为此制作自己的自定义响应系统。以下是您可以尝试的一些基本内容：

DEM0：http://jsbin.com/AKopuGo/1/

请注意最小设备的尺寸（240px，盒子总数不超过200px），但随着页面变大，盒子的大小也不同。然后浮子直到一定的最小宽度才会生效。如果您打算将此作为一项职业，您需要了解有关响应性和流畅性css的更多信息。所有这些最小宽度都是猜测，并且需要为每个最小宽度设置和调整样式，但不重复。如果一个类用于所有大小，请将它放在任何媒体查询之外，如果它用于某个最小宽度（如盒子的大小）放在那里。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both
}
.page-container {
    margin: 0 auto;
    padding: 3%;
}
.logo-box {
    width: 210px;
    border: 1px solid red;
}
.logo-box > div {
    float: left;
    width: 100px;
    height: 100px;
    background: #fff;
    margin-right: 5px;
    margin-bottom: 5px;
}
.logo-box > div.wide {
    width: 205px
}
.text {
    margin-bottom: 3%
}
@media (min-width:600px) { 
    .logo-box {
        width: 250px
    }
    .logo-box > div {
        width: 120px;
        height: 120px;
    }
    .logo-box > div.wide {
        width: 245px
    }
}
@media (min-width:800px) { 
    .float-left {
        float: left
    }
    .float-right {
        float: right
    }
    .text {
        margin-left: 3%
    }
    .logo-box {
        width: 310px
    }
    .logo-box > div {
        width: 150px;
        height: 150px;
    }
    .logo-box > div.wide {
        width: 305px
    }
}
@media (min-width:1200px) { 
    .logo-box {
        width: 410px
    }
    .logo-box > div {
        width: 200px;
        height: 200px;
    }
    .logo-box > div.wide {
        width: 405px
    }
}

HTML

<div class="page-container">
 <h1>Title</h1>
 <section class="text float-right"> Date time etc. </section>
 <section class="logo-box first float-left clearfix">
  <div class="wide">
   Reddit
  </div>
  <div class="square">
   YouTube
  </div>
  <div class="square">
   Google
  </div>
  <div class="square">
   Gmail
  </div>
  <div class="square">
   NetFlix
  </div>
  <div class="wide">
   Pandora
  </div>
 </section>
 <!--/.logo-box-->

 <section class="logo-box second float-right clearfix">
  <div class="wide">
   Reddit
  </div>
  <div class="square">
   YouTube
  </div>
  <div class="square">
   Google
  </div>
  <div class="wide">
   Reddit
  </div>
 </section>
 <!--/.logo-box-->

</div>
<!--/.page-container-->

您还需要使用流畅的图像。

如何在调整大小时保持div不重叠

2 个答案:

DEM0：http://jsbin.com/AKopuGo/1/