Question

我正在尝试用我的html创建一个2列布局，但它没有发生。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<style>
body {
    margin: 0;
    padding: 0;
    width: 100%;
    color: black;
    font: normal 12px/1.8em Arial, Helvetica, sans-serif;
    background-color: #132959;
    background-repeat: repeat;
    background-position: left top;
}


.outer{
    width:970px;
    margin: 0 auto;
    background: black;
}

.toc{
    width:250px;
    margin: 0;
    padding:0;
    float:left;
    color:yellow;
}

.content{
    padding: 0;
    width:720px;
    float:right;
    color:white;
}
.container{
    width:970px;
    margin: 20px auto;
}

.logo {
    margin: 0;
    padding: 0;
    float: left;
    width: auto;
}

.logo a{
    color : #fff;
    text-decoration:none;
    font: bold 40px/1.2em Arial, Helvetica, sans-serif;
    letter-spacing: -2px;
}

.logo small {
    display: block;
    padding-left: 80px;
    font: normal 12px/1.2em Arial, Helvetica, sans-serif;
    color: #EDF3F6;
    letter-spacing: normal;
}

.logoimage {
    height: 50px;
    border: none;
    margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="logo"> 
    <a href="http://www.csmart.co.in">Csmart 
    <small>Let's make life easy!</small> </a> 
</div>
<div style="clear:both;padding:15px"/>
<div class="outer">
  <div class="toc"> 
  TOC
  </div>
  <div class="content">
    Welcome
  </div><!-- content -->
</div><!-- outer-->
</div>

我的div外部是黑色的。但它没有出现在屏幕上。如果我给.outer一个高度，那就出现了。但它不一定是这种方式..我无法预测页面的高度。为什么div外部的背景颜色不会出现在浏览器上？

Answer 1

添加溢出：隐藏到你的.outer中，就像我在这个小提琴中所做的那样：

http://jsfiddle.net/nTxWC/

我建议你在页面的css部分做你所有的css代码，否则会变得非常混乱！

Answer 2

因为你的内心内容是浮动的。将<div style="clear:both"></div>放在.outer div的末尾，您就会看到它。

代码：http://jsfiddle.net/hBP63/

Answer 3

所有内部元素都浮动，因此没有高度。您需要释放其中一个内部元素，为容器元素提供高度，或在outer元素后添加清除div。

HTML 2列布局 - 将背景颜色应用于顶级容器

3 个答案: