CSS 包装器/Clearfix 分辨率

【问题标题】：CSS Wrapper / Clearfix ResolutionCSS 包装器/Clearfix 分辨率
【发布时间】：2013-04-17 14:04:04
【问题描述】：

试图让我的浮动元素与我的所有内容一起扩展时遇到问题。我已经做了一些研究，但我已经被正式难住/筋疲力尽了。我尝试了一些 clearfix 分辨率，标准的、微型的和内联的，基本上是 post 中列出的所有内容。

我的理论：

  1. 我的语法有问题，或者我没有将 <div> 放在正确的位置。
  2. 我正在以不允许我扩展包装器的方式处理内容或帖子。
  3. 我是一个非常特别的舔窗者。

我的代码

样式表：

/*------------------------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 复制。

【问题讨论】：

  • 我认为与 PHP 相比，共享您输出的 HTML 对我们更有帮助。
  • 您是否尝试过在帖子中使用 div 而不是 span？
  • 你能在 JSbin 中为我们复制这个问题吗？很难猜测 PHP 可能在做什么！
  • 所以我们无法访问您的 mysql 数据库。除非您打算让我们访问它，否则您在浏览器中打开您的页面，右键单击查看源代码，然后给代替我们不能使用的PHP..
  • @ArleyM jsbin.com/afusob/1/edit

标签： html css css-float clearfix


【解决方案1】：

在您的 CSS 中的 .content 中，添加 overflow: auto; 。这将自动将您的 div 包裹在您的内容周围。

【讨论】：

  • overflow: hidden 会更好。 Auto 会导致滚动条出现，尤其是当元素无法容纳在父容器的尺寸内时出现水平滚动条。
  • @Terry 我以前的印象是auto 会添加滚动条，但似乎只有在以某种方式指定或限制高度时才会这样做。如果不是（在这种情况下），那么它只会拉伸。另外，hidden 只是隐藏了后续的帖子，没有办法得到它们..
  • 工作，但我也必须在 .line 和 .bar 下使用它，但现在我遇到了另一个问题，滚动条位于我的包装器内部。 （在右侧的 .content 和 .line 之间）不要指望你的帮助，到目前为止你一直很棒，希望我能投票给你的答案。
  • @asifrc 无论如何要把这个滚动条移到最右边？jsbin.com/afusob/1/edit
  • 我自己没有尝试过，但看起来SO上的其他人已经尝试过js。见stackoverflow.com/questions/7889449/…。另外，我认为您现在应该拥有投票权；）
猜你喜欢
  • 2014-08-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-09
  • 1970-01-01
  • 2020-02-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode