我想出了如何限制我的帖子。我遇到的问题是我的css代码几乎集中在3个帖子中,但它仍然偏向左侧。这些不是我将使用的颜色,他们只是帮我布局。如果有人可以提供任何帮助,我们将不胜感激!
这是php代码
<section id="blog">
<div class="container-fluid">
<div class="row">
<div id="blog_title">
Featured Posts
</div><!--END BLOG TITLE-->
<div id="featured_posts">
<?php
// output RSS feed to HTML
output_rss_feed('http://www.bmcsquincy.com/featured_posts/feed', 20, true, true, 200);
// Check http://www.systutorials.com/136102/a-php-function-for-fetching-rss-feed-and-outputing-feed-items-as-html/ for description
// RSS to HTML
/*
$item_cnt: max number of feed items to be displayed
$max_words: max number of words (not real words, HTML words)
if <= 0: no limitation, if > 0 display at most $max_words words
*/
function get_rss_feed_as_html($feed_url, $max_item_cnt = 10, $show_date = true, $show_description = true, $max_words = 0, $cache_timeout = 7200, $cache_prefix = "/tmp/rss2html-")
{
$result = "";
// get feeds and parse items
$rss = new DOMDocument();
$cache_file = $cache_prefix . md5($feed_url);
// load from file or load content
if ($cache_timeout > 0 &&
is_file($cache_file) &&
(filemtime($cache_file) + $cache_timeout > time())) {
$rss->load($cache_file);
} else {
$rss->load($feed_url);
if ($cache_timeout > 0) {
$rss->save($cache_file);
}
}
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
);
$content = $node->getElementsByTagName('encoded'); // <content:encoded>
if ($content->length > 0) {
$item['content'] = $content->item(0)->nodeValue;
}
array_push($feed, $item);
}
// real good count
if ($max_item_cnt > count($feed)) {
$max_item_cnt = count($feed);
}
$result .= '<ul class="feed-lists">';
//ADDED THIS FOR POST AMOUNT
$max_item_cnt = 3;
$max_words = 25;
for ($x=0;$x<$max_item_cnt;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$result .= '<li class="feed-item">';
$result .= '<div class="feed-title"><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong></div>';
if ($show_date) {
$date = date('l F d, Y', strtotime($feed[$x]['date']));
$result .= '<small class="feed-date"><em>Posted on '.$date.'</em></small>';
}
if ($show_description) {
$description = $feed[$x]['desc'];
$content = $feed[$x]['content'];
// find the img
$has_image = preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $content, $image);
// no html tags
$description = strip_tags($description, '');
// whether cut by number of words
if ($max_words > 0) {
$arr = explode(' ', $description);
if ($max_words < count($arr)) {
$description = '';
$w_cnt = 0;
foreach($arr as $w) {
$description .= $w . ' ';
$w_cnt = $w_cnt + 1;
if ($w_cnt == $max_words) {
break;
}
}
$description .= " ...";
}
}
// add img if it exists
//ADDED THE P IN DESCRIPTION LINE TO FOR A BREAK BY IMAGE
if ($has_image == 1) {
$description = '<p> <a href="'.$link.'" img="'.$description.'"> <img class="feed-item-image" src="' . $image['src'] . '" /></a></p>' . $description;
}
$result .= '<div class="feed-description">' . $description;
//ADDED THE P IN THIS TO LINE BREAK CONTINUE READING
$result .= '<p> <a href="'.$link.'" title="'.$title.'">Continue Reading »</a></p>'.'</div>';
}
$result .= '</li>';
}
$result .= '</ul>';
return $result;
}
function output_rss_feed($feed_url, $max_item_cnt = 10, $show_date = true, $show_description = true, $max_words = 0)
{
echo get_rss_feed_as_html($feed_url, $max_item_cnt, $show_date, $show_description, $max_words);
}
?>
</div><!--END FEATURED POSTS-->
<div class="col-md-12 col-sm-12 col-xs-12" id="blog_btn_section">
<div id="btn_see_work" class="col-md-12 text-center"><a class="button btn btn-default btn-md wp5 delay-3s" id="btn-intro" href="./contact.php" target="_top">SEE MORE
</a>
</div><!--END BUTTON-->
</div><!--END COL SPAN-->
</div><!--END ROW-->
</div><!--END CONTAINER-->
</section><!--END SECTION BLOG-->
这是我的CSS,它给了我对齐麻烦
#blog {
background-color: yellow;
color: #dbdbdb;
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
margin: 0px auto 0px auto;
}
#blog_title {
text-align: center;
font-family: pathwaygothic;
font-size: 2em;
color: green;
padding-bottom: 50px;
}
#blog_btn_section {
padding-top: 50px;
}
#featured_posts {
background-color: pink;
max-width: 1200px;
margin: 0px auto 0px auto;
padding: 5px;
}
#featured_posts ul {
display: inline-block;
margin: 0px auto 0px auto;
text-align: center;
padding: 0px;
}
#featured_posts li {
list-style-type: none;
text-align: left;
padding: 30px;
float: left;
font-family: pathwaygothic;
font-size: 1em;
background-color: purple;
max-width: 1200px;
margin-left: 25px;
}
.feed-lists {
background-color: aqua;
width: 100%;
}
.feed-title a {
color: red;
}
.feed-date {
color: aqua;
}
.feed-description {
width: 300px;
}
.feed-lists li {
background-color: green;
}
.feed-item-image:hover {
opacity: .5;
background-color: #333333;
transition: 0.5s ease;
}