Question

我的代码存在问题。如果你运行它，你会发现背景并没有与内容一起流动，任何想法如何解决这个问题，谢谢。

需要所有div， sw 用于阻止内容大于900px; 一个和两个用于将内容分成两列，除非它是一个移动设备，即少于481px;

<!DOCTYPE html>
<html>
<head>
    <style>
    #about {
        background-color: #ecf0f1; 
        padding: 50px; 
        margin: 0 auto; 
        color: #7f8c8d;
    }

    .sw { 
        margin: 0 auto; 
        max-width: 900px;
    }

@media (min-width: 481px) {

    .one { 
        height: 100%;
        width: 50%; 
        text-align: left; 
        float: left;
    }

    .two {
        height: 100%; 
        width: 50%; 
        text-align: right; 
        float: right;
    }
}
@media (max-width: 480px) {

    .one { 
        height: 100%;
        float: left;
        clear: both;
    }
    .two { 
        height: 100%;
        margin-top: 20px;
        float: left;
        clear: both;
    }
}
    </style>
</head>
<body>
      <section id="about">
    <div class="sw">
        <div class="one">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="two">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>
</section>
</body>
</html>

Answer 1

因为你浮动内容，你需要将overflow:auto添加到容器中以恢复你寻找的行为：

.sw {
    margin: 0 auto;
    max-width: 900px;
    overflow:auto;
}

<强> jsFiddle example

Answer 2

您需要添加一个clearfix来实现您想要的效果，.one和.two的浮动会导致当前效果。

#about:before,
#about:after {
  content:"";
  display:table;
}
#about:after {
  clear:both;
}
#about {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

您可以在此处详细了解http://nicolasgallagher.com/micro-clearfix-hack/

div高度内div的问题

2 个答案: