试图让我的浮动元素与我的所有内容一起扩展时遇到了问题.我做了一些研究,但我已经变得正式难过/疲惫.我尝试了一些clearfix解决方案,标准,微型和内联,基本上是
post中列出的所有内容.
我的理论：
>我的语法有问题,或者我没有放置< 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模板在某个时间点会过时和/或不是设计网页的最佳方式.任何有关如何做的建议或资源也会受到欢迎.
编辑4/24/13
添加查看页面源后收到的代码.
<!-- 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复制.
最佳答案 在你的CSS中的.content中,添加overflow：auto; .这将自动包裹您的内容div.
