我决定今天开始一个新的个人项目,这是一个论坛类型的东西(仅供练习)。 我设置了基本布局并编写了一些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文件让我知道。
我真的很感激它!
CSS将是有益的。你有围绕Sidebar.php的包装吗? – Gerard
添加了CSS。我有一个名为'侧边栏'的包装,它没有显示在帖子中,但我修复了它:) – Sam
我认为你应该可以添加:.sidebar {float:right;} – Gerard