拆分屏幕麻烦

时间：2016-03-13 13:20:55

标签： html css frontend

我尝试在codepen上制作响应式分屏。当屏幕尺寸较小时，它会给出列，否则会得到两行。在codepen上一切正常。但是，当我尝试将此代码实现到我的网站代码中时，灰色区域会减少。可能是什么原因？

http://codepen.io/bellarose/pen/YqGZLL

HTML：

<section class="first-section">
<body>
   <div class="container-info">         
     <h1>first screen</h1>
   </div>
   <div class="container-main">
     <h1>second screen</h1>
   </div>
</body>
</section>

<section class="second-section">
<body>
   <div class="container-info1">            
     <h1>first screen</h1>
   </div>
   <div class="container-main1">
     <h1>second screen</h1>
   </div>
</body>
</section>

CSS：

.first-section {
    height: 100%;
    text-align: center;
}

.second-section {
    height: 100%;
   text-align: center;
}

.container-info {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 490px;
  background-color: red; }
  @media (min-width: 768px) {
    .container-info {
      float: left;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%; } }



.container-main {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 490px;
  background-color: grey; }
  @media (min-width: 768px) {
    .container-main {
      float: right;
      right: 0;
      top: 0;
      height: 100%;
      width: 50%; } }


.container-info1 {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 490px;
  background-color: pink; }
  @media (min-width: 768px) {
    .container-info1 {
      float: left;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%; } }



.container-main1 {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 490px;
  background-color: white; }
  @media (min-width: 768px) {
    .container-main1 {
      float: right;
      right: 0;
      top: 0;
      height: 100%;
      width: 50%; } }

3 个答案:

答案 0 :(得分：3)

HTML语法不正确。首先，body标签创建一次，您不能将其放在其他元素中。 <body>是主要的“包装器”。

纠正HTML： 

<html>
<head>
  ... metadata
</head>

<body>

  <section class="first-section">
    <div class="container-info">
      <h1>first screen</h1>
    </div>
    <div class="container-main">
      <h1>second screen</h1>
    </div>
  </section>

  <section class="second-section">
    <div class="container-info1">
      <h1>first screen</h1>
    </div>
    <div class="container-main1">
      <h1>second screen</h1>
    </div>
  </section>


</body>
</html>

至于灰色框没有出现，可能是因为你使用height: 100%而没有确保HTML /正文也有height:100%。如果不向身体添加高度，计算将无法正常工作。

由于父级（部分）的固定高度为100％而子级溢出该高度，因此未显示灰色框。要解决此问题，您可以将height:100%部分更改为min-height: 100%

P.S你的CSS可以简化为：

* {margin: 0; padding: 0;}

html, body {height:100%;}

section {
  min-height: 100%;
  text-align: center;
}

section > div {
  display: block;
  position: relative;
  width: 100%;
  min-height: 490px;
}

@media (min-width: 768px) {
  section div {
    height: 100%;
    float: left; 
    width: 50%;
  }
}

/* coloring */

.container-info {background: red;}
.container-main {background-color: grey;}
.container-info1 {background-color: pink;}
.container-main1 {background-color: white;}
<section class="first-section">
  <div class="container-info">
    <h1>first screen</h1>
  </div>
  <div class="container-main">
    <h1>second screen</h1>
  </div>
</section>

<section class="second-section">
  <div class="container-info1">
    <h1>first screen</h1>
  </div>
  <div class="container-main1">
    <h1>second screen</h1>
  </div>
</section>

答案 1 :(得分：0)

.first-section {
    height: 100%;
    text-align: center;
}

.second-section {
    height: 100%;
   text-align: center;
}

.container-info {
  display: inline-block;
  position: relative;
  min-height: 490px;
  background-color: red; }
  @media (min-width: 768px) {
    .container-info {
      float: left;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%; } }



.container-main {
  display: inline-block;
  position: relative;
  min-height: 490px;
  background-color: grey; }
  @media (min-width: 768px) {
    .container-main {
      float: right;
      right: 0;
      top: 0;
      height: 100%;
      width: 50%; } }
@media and(max-width:767px){
  .container-info1{
    width:100%;
  }
  .container-main1{
    width:100%;
  }
}

.container-info1 {
  display: inline-block;
  position: relative;
  min-height: 490px;
  background-color: pink; }
  @media (min-width: 768px) {
    .container-info1 {
      float: left;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%; } }



.container-main1 {
  display: inline-block;
  position: relative;
  min-height: 490px;
  background-color: white; }
  @media (min-width: 768px) {
    .container-main1 {
      float: right;
      right: 0;
      top: 0;
      height: 100%;
      width: 50%; } }

我只是从类.container-info1和.container-main1中移除宽度 并在另一个媒体查询中定义了宽度@media and (max-width:767px)

答案 2 :(得分：0)

好的，现在试试这个

   <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>

.first-section {
    height: 100%;
    text-align: center;
}

.second-section {
    height: 100%;
   text-align: center;
}

.container-info {
  display: inline-block;
  position: relative;
  min-height: 490px;
  background-color: red; }



.container-main {
  display: inline-block;
  position: relative;
  min-height: 490px;
  background-color: grey; }


.container-info1 {
  display: inline-block;
  position: relative;
  min-height: 490px;
  background-color: pink; }



.container-main1 {
  display: inline-block;
  position: relative;
  min-height: 490px;
  background-color: white; }

    @media screen and (min-width: 768px) {
    .container-info {
      float: left;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%; } 
    .container-main {
      float: right;
      right: 0;
      top: 0;
      height: 100%;
      width: 50%; } }

 @media screen and (min-width: 768px) {
    .container-info1 {
      float: left;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%; } 
    .container-main1 {
      float: right;
      right: 0;
      top: 0;
      height: 100%;
      width: 50%; } }

    @media screen and (max-width:767px){
  .container-info1{
    width:100%;
  }
  .container-main1{
    width:100%;
  }
  .container-info{
    width:100%;
  }
  .container-main{
    width:100%;
  }
    }

    </style>
</head>
<body>
<section class="first-section">
<body>
   <div class="container-info">         
     <h1>first screen</h1>
   </div>
   <div class="container-main">
     <h1>second screen</h1>
   </div>
</body>
</section>

<section class="second-section">
<body>
   <div class="container-info1">            
     <h1>first screen</h1>
   </div>
   <div class="container-main1">
     <h1>second screen</h1>
   </div>
</body>
</section>



</body>
</html>
相关问题
最新问题