试图让我的浮动元素与我的所有内容一起扩展时遇到问题。我已经做了一些研究，但我已经被正式难住/筋疲力尽了。我尝试了一些 clearfix 分辨率，标准的、微型的和内联的，基本上是这篇文章中列出的所有内容。
我的理论：
- 我的语法有问题，或者我没有将 放在
<div>正确的位置。 - 我正在以不允许我扩展包装器的方式处理内容或帖子。
- 我是一个非常特别的舔窗者。
我的代码
样式表：
/*------------------------Wrapper------------------------*/
html, body, #wrapper, .bar, .line, .content{
margin: 0;
padding: 0;
height: 100%;
}
#wrapper{
width: 100%;
overflow: auto;
}
.bar{
float: left;
width: 5%;
}
.line{
float: left;
width: 1%;
}
.content{
float:left;
width:88%;
}
.white{
background-color: #FFFFFF;
}
.red{
background-color: #A80000;
}
.black{
background-color: #000000;
background-image:url('http://i.imgur.com/bcq2U.png');
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
}
/*------------------------Navigation------------------------*/
#nav{
width: 100%;
float: left;
background-color: #A80000;
border-bottom: 1px solid #C4A23E;
}
ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
font-family: "Arial";
}
li{
float: left;
}
li a{
display: block;
padding: 8px 15px;
text-decoration: none;
color: #000000;
background-color:#A80000;
border-right: 1px solid #C4A23E; }
li a:hover{
color: #A80000;
background-color: #C4A23E;
}
/*------------------------Text------------------------*/
h1 {
color: #FFFFFF;
font-family: "Arial";
text-alighn:center;
}
/*------------------------Boxes------------------------*/
.post{
float:left;
display:inline;
border-style:groove;
border-width:2px;
border-color:#A80000;
background-image:url('http://i.imgur.com/kOFxo.png');
background-repeat:no-repeat;
background-position: top left;
background-color:white;
width:60%;
margin:0px auto;
text-align:left;
padding:2px 5px 2px 5px;
margin:1cm 0cm 1cm 1cm;
}
.logbox{
float:left;
border-style:groove;
border-width:2px;
border-color:#A80000;
background-image:url('http://i.imgur.com/kOFxo.png');
background-repeat:no-repeat;
background-position:top left;
background-color:white;
margin:0px auto;
text-align:center;
padding:80px 80px 80px 80px;
margin:1cm 0cm 1cm 1cm;
}
/*------------------------ClearfixA------------------------*/
/*
.clearfix:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
.clearfix{
display:inline-block;
}
html[xmlns].clearfix{
display:block;
}
*html.clearfix{
height:1%;
}
*/
/*------------------------ClearfixB------------------------*/
.cf:before,
.cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom: 1;
}
网页：
<? include "config.php";
include_once "markdown.php";
$my_html = Markdown($my_text);
?>
<!-- HTML Start -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleB.css"/>
<title>Blog</title>
</head>
<body>
<!-- Wrapper Start -->
<div id="wrapper">
<div class="wrapper cf">
<span class="bar white"></span>
<span class="line red"></span>
<span class="content black">
<!-- Content Start -->
<h1>Project Hollywood</h1>
<div id="nav">
<?session_start();
if (!isset($_SESSION['username'])){?>
<ul>
<li><a href="login.php">Sign In</a></li>
<li><a href="index.php">Home</a></li>
</ul>
<?}
else{
?>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="admin.php">Admin Panel</a></li>
<li><a href="logout.php">Sign Out</a></li>
</ul>
<?}
?>
</div>
<!-- Entries Start -->
<?$query= "SELECT *
FROM entries
ORDER BY submitted DESC";
$result= mysql_query($query);
$num = mysql_numrows($result);
?>
<?$i=0;
while ($i < $num){
$submit = mysql_result($result, $i, "submitted");
$title = mysql_result($result, $i, "title");
$content = mysql_result($result, $i, "content");
$userid = mysql_result($result, $i, "userid");
$id = mysql_result($result, $i, "id");
?>
<?$q = "SELECT username
FROM users
WHERE $userid = uid";
$r = mysql_query($q);
$username = mysql_result($r, 0, "username");
?>
<span class="post">
<h3><?=$title?></h3>
<?=$submit?><br/>
<?=$username?>
<p><?=$content?></p><br/>
<?$que = "SELECT t.tag
FROM tags AS t
INNER JOIN idx AS i ON t.tagid = i.tid
INNER JOIN entries AS e ON i.eid = e.id
WHERE e.id = '$id'";
$res = mysql_query($que);
$n = mysql_numrows($res);
$x=0;
?>
Tags:
<?while ($x < $n){
$tag = mysql_result ($res, $x, "tag");
$tid = mysql_result ($res, $x, "tid");
?>
<a href = "tag.php?tid=<?=$tag?>">
<?=$tag?></a>,
<?$x++;
}
?>
</span>
<?$i++;
}
?>
<!-- Entries & Content End -->
</span>
<span class="line red"></span>
<span class="bar white"></span>
</div>
</div>
<!-- Wrapper End -->
</body>
</html>
<!-- HTML End -->
这是我在 Chrome 上看到的图像：
任何解决方案、想法、资源、帮助、建议将不胜感激。
另外，我读到 FLOAT 模板会在某个时间点过时和/或不是设计网页的最佳方式。任何有关如何执行此操作的建议或资源也将受到欢迎。
编辑2013 年 4 月 24 日
添加查看页面源后收到的代码。
<!-- HTML Start -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleB.css"/>
<title>Blog</title>
</head>
<body>
<!-- Wrapper Start -->
<div id="wrapper">
<div class="wrapper cf">
<span class="bar white"></span>
<span class="line red"></span>
<span class="content black">
<!-- Content Start -->
<h1>Project Hollywood</h1>
<div id="nav">
<ul>
<li><a href="login.php">Sign In</a></li>
<li><a href="index.php">Home</a></li>
</ul>
</div>
<!-- Entries Start -->
<div class="post">
<h3>Lorem Ipsum Contd</h3>
2013-04-22 16:01:31<br/>
admin<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.</p><br/>
Tags:
<a href = "tag.php?tid=Lorem">
Lorem</a>,
<a href = "tag.php?tid=Ipsum">
Ipsum</a>,
<a href = "tag.php?tid=Lorem Ipsum">
Lorem Ipsum</a>,
</div>
<div class="post">
<h3>Lorem Ipsum</h3>
2013-04-22 00:12:40<br/>
admin<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.</p><br/>
Tags:
<a href = "tag.php?tid=Lorem">
Lorem</a>,
<a href = "tag.php?tid=Ipsum">
Ipsum</a>,
</div>
<!-- Entries & Content End -->
</span>
<span class="line red"></span>
<span class="bar white"></span>
</div>
</div>
<!-- Wrapper End -->
</body>
</html>
<!-- HTML End -->
也是一个JS Bin复制。