Question

我有一个响应式页面，可以调整大小以适应桌面，平板电脑或手机。手机和平板电脑的CSS还可以，但桌面有问题。区别在于包含所有内容的主要部分。

对于手机和平板电脑，主div宽度是屏幕的100％，但对于桌面，它应固定为900px并且也在屏幕中心。

当我将它居中时，主div不会根据其中的内容调整其高度，但是对于其他屏幕尺寸则不会。当我添加一个浮动：左;到主要的div，它漂浮到右边，然后高度跟随其中的内容

这可能是一个非常简单的修复，但我已经尝试了所有我知道的东西，并且没有找到解决方案。

谢谢你们！

body {
  background-color: #f1f1f1;
  margin: 0;
}
#main {
  background-color: #0000ff;
  color: #222222;
  float: left;
  height: auto;
  width: 100%;
}
/* Home Big
/*************************/

#home-big {
  height: auto;
  width: 100%;
}
#home-big h1 {
  background-color: #1eaccc;
  color: #ffffff;
  margin: 0;
  padding: 7px;
}
/* Home Big Content
/*************************/

.home-big-content {
  float: left;
  height: auto;
  margin-top: 10px;
  width: 100%;
}
/* Home Big Left
/*************************/

.home-big-left {
  background-color: #ffff00;
  float: left;
  height: auto;
  width: 50%;
}
.home-big-left img {
  height: auto;
  width: 100%;
}
/* Home Big Right
/*************************/

.home-big-right {
  float: left;
  height: auto;
  margin-left: 0;
  width: 50%;
}
/* TABLET SIZE
/*****************************************************************************/

@media all and (min-width: 600px) {
  #main {
    background-color: #00ff00;
    float: left;
    height: initial;
    padding: 10px 0;
  }
  #home-big {
    margin: 0 10px;
    width: initial;
  }
  .home-big-left {
    background-color: #ffff00;
  }
}
/* DESKTOP SIZE
/*****************************************************************************/

@media all and (min-width: 900px) {
  #main {
    background-color: #ff0000;
    float: initial;
    margin: 0 auto;
    width: 900px;
  }
  #home-big {
    margin: 0;
    width: initial;
  }
  .home-big-left {
    background-color: #ffff00;
  }
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>

<body>
  <section id="main">
    <article id="home-big">
      <h1>Headline</h1>

      <div class="home-big-content">
        <div class="home-big-left">
          Left
        </div>
        <div class="home-big-right">
          Right
        </div>
      </div>
    </article>
  </section>
</body>

</html>

Answer 1

当你浮动东西时，你必须清除它或使用overflow: hidden

尝试：

.clearfix:after { 
    content: "";
    display: table;
    clear: both;
}

将clearfix类应用于包含浮动元素的所有容器，或使用overflow: hidden;

Answer 2

您需要清除#main元素的浮点数。我使用micro clearfix。

使用如下：

<section id="main" class="cf"></section>

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}    
.cf:after {
    clear: both;
}

如何在响应页面上以百分比宽度显示中心div？

2 个答案: