div高度div問題

我遇到下面的代碼問題。如果你運行它，你會看到背景不隨內容流動，任何想法如何解決這個問題，謝謝。div高度div問題

所有的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>

來源

2014-06-16 CarlRyds

竭誠爲您提供[小提琴]（http://jsfiddle.net/）在這裏。 – shennan

溢出，'.sw'傢伙，它應該工作？ –

因爲你漂浮的內容，你需要添加overflow:auto到容器來恢復你所尋求的行爲：

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

jsFiddle example

來源

2014-06-16 15:25:15 j08691

完美的作品，非常感謝:) – CarlRyds

您需要添加一個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/

來源

2014-06-16 15:31:16 Arminmsg

div高度div問題

回答

相關問題