1

我的班级有 3 个父 div。它们将页面的三个部分分开：页眉、正文和页脚部分。标题没问题。在正文中，我有一个 div，它应该像标尺一样画一条线。

我将循环代码放入这条线以绘制它，但它失败了，所以我设置了一个绝对位置，以便内容增加标尺/线的高度也增加。然后由于某种原因在页脚中我应该设置position:relative;但是当我这样做时，页脚 div 出现在 body div 上方。

我该如何解决？

请注意，主体和标尺/线的高度是自动的，当我为主体设置背景颜色时，它没有任何区别。

代码示例：

html

<body>
<div class="header">it's own code and classes</div>
<div class="body">
  <div class="line">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="post">
      <div class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><h3><?php the_title(); ?></h3></a></div>
      <div class="cont"><?php get_the_excerpt();?></div>
     <?php the_post_thumbnail('45*45'); ?>
  </div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<div class="footer"><div class="ftr"></div></div>
</body>

在css部分我有这些：

.body {
height:auto;
width:950px;
margin:0 auto 0 auto;
background:#098;
 }

 .line {
width:4px;
height:auto;
background:#000;
position:absolute;
right:640px;
padding-top:100px;
padding-bottom:30px;
 }
 .post{
width: 460px;
height:170px;
background: #fff;
position: relative;
border-radius:10px;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
direction:ltr;
float:right;
margin-right:21px;
border-top-right-radius:0px 0px;
 }
     .post:after {
    content: "";
    position: absolute;
    top: 6%;
    margin: -10px 0 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    right: -10px;
    border-left: 10px solid #999;
     }
 .title {
width:90px;
height:15px;
margin-top:-13px;
margin-right:10px;
margin-left:10px;
 }

 .cont{
width:300px;
margin-top:15px;
float:right;
margin-right:13px;
 }
 .footer {
width:999px;
height:200px;
margin:auto;
 }
.ftr {
    width:999px;
    height:200px;
    background:#000;
    position:relative;
    clear:both;
}
    .ftr:after{
        content:"";
        position:absolute;
        top:-9px;
        right:500px;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-bottom:10px solid #06c;
    }

编辑：这就是我想要的

.body {
height:auto;
width:950px;
margin:0 auto 0 auto;
background:#098;
 }

 .line {
width:4px;
**height:100%;** //this fixed the problem
background:#000;
padding-top:100px;
padding-bottom:30px;
 }
 .post{
width: 460px;
height:170px;
background: #fff;
position: relative;
border-radius:10px;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
direction:ltr;
float:right;
margin-right:21px;
border-top-right-radius:0px 0px;
 }
     .post:after {
    content: "";
    position: absolute;
    top: 6%;
    margin: -10px 0 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    right: -10px;
    border-left: 10px solid #999;
     }
 .title {
width:90px;
height:15px;
margin-top:-13px;
margin-right:10px;
margin-left:10px;
 }

 .cont{
width:300px;
margin-top:15px;
float:right;
margin-right:13px;
 }
 .footer {
width:999px;
height:200px;
margin:auto;
 }
.ftr {
    width:999px;
    height:200px;
    background:#000;
    position:relative;
    clear:both;
}
    .ftr:after{
        content:"";
        position:absolute;
        top:-9px;
        right:500px;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-bottom:10px solid #06c;
    }

编辑2：我仍然有画线的问题。因为内容是动态的，如果我height:100%在像素比例或什min-height至内容增加或减少时设置或某事它不会改变行高

4

1 回答 1

0

当您将某些内容放入 时position:absolute;，它们会从其容器上下文中取出并且不会展开它们。因此，当您将页脚放入时position:relative;，它会落在div class="body"结束处，但由于它只包含line（这是绝对的），所以正文是空的，因此，页脚出现在页脚“下方”。

如果我明白你想要什么，你可能应该 close line，这样“帖子”就不会出现position:absolute;。

<div class="body">
  <div class="line"></div><!--here-->
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="post">
于 2012-11-12T20:22:40.843 回答