3

我希望列表浮动在菜单容器的中心。房子下方框中的文本（这只是我为演示而拍摄的随机图像）漂浮在框的中心。

然后我希望内容容器填满 menucontainer 下方 bigcontainer 中剩余的所有空间。

这就是我想要得到的： 我想要什么...

这就是我的结论： 我得到了什么...

显然我不知道我在做什么。这是代码：http: //jsfiddle.net/krhzM/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
 list-style:none;
 position:relative;
}
li {
 border: 1px solid #CCC;
 margin:5px;
 float:left;
}
#menucontainer {
 border: 1px solid #111;
 width: 400px;
 margin-left: auto;
 margin-right: auto;
}
#contentcontainer {
 width:100px;
 border: 1px solid #fac;
}
#bigcontainer {
 border: 2px solid #cfa;
 width: 700px;
 margin-left: auto;
 margin-right:auto;
}
</style>
</head>
<body>
<div id="bigcontainer">
<div id="menucontainer">
 <ul>
  <li>
   <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/>
   <br/>
   <a href="#">Coffee</a>
  </li>
  <li>
   <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/>
   <br/>
   <a href="#">Tea</a>
  </li>
  <li>
   <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/>
   <br/>
   <a href="#">Coca Cola</a>
  </li>
 </ul>
</div>
<div id="contentcontainer">
 <h1>this is my content</h1>
</div>
</div>
</body>
</html>
4

2 回答 2

3

浮动元素的高度不会推动/扩展或影响父元素的高度，除非父元素最后包含一个 clear。

使用浮动时，您需要在父容器上使用一些 clearfix 方法。

http://css-tricks.com/snippets/css/clear-fix/

将以下内容添加到您的CSS中：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

对于所有包含浮动子元素的父容器，添加 class .clearfix，如下所示：

<div class="clearfix">
  <div class="float-left">This is floated left.</div>
  <div class="float-right">This is floated right.</div>
</div>

在您的情况下，您需要将.clearfix类添加到您<ul>的#menucontainerdiv 中，因为您正在浮动<li>标签。

如果您仍然感到困惑，请查看这个涉及浮动和清除的不同场景的演示，以更好地了解它的工作原理：http ://themergency.com/clearfix/clearfix_demo_4_micro_clearfix.htm

于 2013-05-16T14:33:15.140 回答
1

尝试以下 css：以下是您可能错过的 3 件事。

ul {
    list-style:none;
    position:relative;
    display: inline-block;
}

li {
    border: 1px solid #CCC;
    margin:5px; 
    display: inline-block;      
}

#contentcontainer {    
    border: 1px solid #fac;
    text-align: center;
}
于 2013-05-16T14:48:19.877 回答