Question

我希望列表浮动在menucontainer的中心。房子下面的方框中的文字（这只是我拍摄的随机图像）漂浮在盒子的中央。

然后我希望内容容器填满菜单容器下面的bigcontainer中剩下的所有空间。

这就是我想要的： what i wanted...

这就是我最后的结果： what i got...

显然我不知道自己在做什么。这是代码：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>

Answer 1

浮动元素的高度不会推/扩展或影响父元素的高度，除非父元素在末尾包含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 */

对于包含浮动子元素的所有父容器，添加类.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> div中包含的#menucontainer，因为您正在浮动<li>代码。

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

Answer 2

尝试以下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;
}

CSS格式出错了

2 个答案: