側邊欄移動到底部

Question

我決定今天開始一個新的個人項目，這是一個論壇類型的東西（僅供練習）。 我設置了基本佈局並編寫了一些PHP函數，但是當我添加一個新帖子時，側邊欄向下移動並位於帖子下方。

這裏的一些圖片：

的sidebar.php

<div class ="sidebar"> 

<div class = "col-lg-3 profile-tab sidebar-nav"> 

    <img src="images/dummy-pic.png" alt = ""><br> 
     <a href = "#">USERNAME</a><br> 
     <span>Post count: x</span><br> 
     <span>Likes: x</span> 


</div> 

<div class="col-lg-3"> 
    <ul class="sidebar-nav"> 
     <h4 class = "sb-heading">Post Categories</h4> 
      <li><a href="#">Category Name</a> 
      </li> 
      <li><a href="#">Category Name</a> 
      </li> 
      <li><a href="#">Category Name</a> 
      </li> 
      <li><a href="#">Category Name</a> 
      </li> 
      </ul> 
</div> 

<div class = "col-lg-3"> 
    <ul class="sidebar-nav"> 
     <h4 class = "sb-heading">Announcements</h4> 

      <li>interesting stuff</li> 
      <li>interesting stuff</li> 
      <li>interesting stuff</li> 
    </ul> 
</div> 

Posts.php

<div class = "post col-lg-8"> 

<h2 class = "page-header"><?php echo $post_title; ?></h2> 
<p class = "lead">By 
<a href = "#"><?php echo $post_author ?></a></p> 
<span class = "glyphicon glyphicon-time"><?php echo $post_date ?></span> 

<img class = "img-responsive" src = "<?php echo $post_image; ?>" /> 
<br> 
<p>  
<?php 
echo $post_content; 
?> 

</p> 

<br/> 
<a class = "btn btn-primary" href = "#">READ MORE</a> 

</div> 

<?php } ?> 

有關CSS

.sidebar-nav{ 
background-color: #ffffff; 
margin-top: 15px; 
border:2px solid #1b76bc; 
border-radius: 10px; 
padding: 20px 0 20px 0; 
text-align: center; 


} 

div.post.col-lg-8{ 

margin-left: 20px; 
} 

.sidebar-nav li{ 

    list-style: none; 
} 

.post{ 

padding:15px; 
margin-top: 15px; 
background-color: #ffffff; 
border-radius: 10px; 
border: 2px solid #1b76bc; 
padding: 20px; 

} 

我用COL-LG-3而不是4的側邊欄，這樣我可以添加一個左邊距的帖子。有可能是更好的方法，但只是一個擡頭

如果你需要的css文件讓我知道。

我真的很感激它！

Answer 1

請在下面找到工作的例子。小提琴here

.sidebar { 
 
    float: right; 
 
    width: 25%; 
 
    max-width: 25%; 
 
} 
 

 
div.post.col-lg-8 { 
 
    float: left; 
 
    width: 70%; 
 
    max-width: 70%; 
 
} 
 

 
.sidebar-nav { 
 
    background-color: #ffffff; 
 
    margin-top: 15px; 
 
    border: 2px solid #1b76bc; 
 
    border-radius: 10px; 
 
    padding: 20px 0 20px 0; 
 
    text-align: center; 
 
} 
 

 
div.post.col-lg-8 { 
 
    margin-left: 20px; 
 
} 
 

 
.sidebar-nav li { 
 
    list-style: none; 
 
} 
 

 
.post { 
 
    padding: 15px; 
 
    margin-top: 15px; 
 
    background-color: #ffffff; 
 
    border-radius: 10px; 
 
    border: 2px solid #1b76bc; 
 
    padding: 20px; 
 
}

<div class="sidebar"> 
 

 
    <div class="col-lg-3 profile-tab sidebar-nav"> 
 

 
    <img src="images/dummy-pic.png" alt=""> 
 
    <br> 
 
    <a href="#">USERNAME</a> 
 
    <br> 
 
    <span>Post count: x</span> 
 
    <br> 
 
    <span>Likes: x</span> 
 

 

 
    </div> 
 

 
    <div class="col-lg-3"> 
 
    <ul class="sidebar-nav"> 
 
     <h4 class="sb-heading">Post Categories</h4> 
 
     <li><a href="#">Category Name</a> 
 
     </li> 
 
     <li><a href="#">Category Name</a> 
 
     </li> 
 
     <li><a href="#">Category Name</a> 
 
     </li> 
 
     <li><a href="#">Category Name</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="col-lg-3"> 
 
    <ul class="sidebar-nav"> 
 
     <h4 class="sb-heading">Announcements</h4> 
 

 
     <li>interesting stuff</li> 
 
     <li>interesting stuff</li> 
 
     <li>interesting stuff</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="post col-lg-8"> 
 

 
    <h2 class="page-header">Post title</h2> 
 
    <p class="lead">By 
 
    <a href="#"> 
 
     Post author 
 
    </a> 
 
    </p> 
 
    <span class="glyphicon glyphicon-time">May 30, 2017</span> 
 

 
    <img class="img-responsive" src="http://placehold.it/100" /> 
 
    <br> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    <br/> 
 
    <a class="btn btn-primary" href="#">READ MORE</a> 
 

 
</div> 
 
<div class="post col-lg-8"> 
 

 
    <h2 class="page-header">Post title</h2> 
 
    <p class="lead">By 
 
    <a href="#"> 
 
     Post author 
 
    </a> 
 
    </p> 
 
    <span class="glyphicon glyphicon-time">May 30, 2017</span> 
 

 
    <img class="img-responsive" src="http://placehold.it/100" /> 
 
    <br> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    <br/> 
 
    <a class="btn btn-primary" href="#">READ MORE</a> 
 

 
</div>

Answer 2

您必須在Posts.php中關閉div。

編輯：您可以嘗試類似下面：

的sidebar.php

<div class ="col-lg-3 col-md-3 col-sm-3 sidebar"> 

<div class = "profile-tab sidebar-nav"> 

    <img src="images/dummy-pic.png" alt = ""><br> 
     <a href = "#">USERNAME</a><br> 
     <span>Post count: x</span><br> 
     <span>Likes: x</span> 


</div> 

<div> 
    <ul class="sidebar-nav"> 
     <h4 class = "sb-heading">Post Categories</h4> 
      <li><a href="#">Category Name</a> 
      </li> 
      <li><a href="#">Category Name</a> 
      </li> 
      <li><a href="#">Category Name</a> 
      </li> 
      <li><a href="#">Category Name</a> 
      </li> 
      </ul> 
</div> 

<div> 
    <ul class="sidebar-nav"> 
     <h4 class = "sb-heading">Announcements</h4> 

      <li>interesting stuff</li> 
      <li>interesting stuff</li> 
      <li>interesting stuff</li> 
    </ul> 
</div> 
</div> 

Posts.php

<div class = "col-lg-8 col-md-8 col-sm-8"> //New line 
// php foreach etc. 
<div class = "post"> 

<h2 class = "page-header"><?php echo $post_title; ?></h2> 
<p class = "lead">By 
<a href = "#"><?php echo $post_author ?></a></p> 
<span class = "glyphicon glyphicon-time"><?php echo $post_date ?></span> 

<img class = "img-responsive" src = "<?php echo $post_image; ?>" /> 
<br> 
<p>  
<?php 
echo $post_content; 
?> 

</p> 

<br/> 
<a class = "btn btn-primary" href = "#">READ MORE</a> 

</div> 

<?php } ?>