Html Css:Wordpress&；Boostrap：设置帖子页面的样式'；s特色形象

我被要求在创建此自定义主题时使用引导css：

我已经把剩下的一切（我是指一切）都浮出水面，但无论我做什么，标题和摘录都不会超出我的特色形象（见律师形象）

我发现很难想出某种css条件语句，因此无论是否有特征图像，所有内容都是一致的

如何做到这一点？你如何写“如果有一个特色图片，使标题和摘录的最大宽度为300px”？我不明白，在网上也找不到任何相关的东西

我通过复制我的Firefox Firebug htmlk和css创建了一个JS提琴，它可以工作，但在我的页面上没有：（：）

这是我的css：

.floatleft, 
.news-page h1, 
.news-page header.entry-header, 
.news-page .entry-content, 
a.post-thumbnail img.attachment-CrippsTheme-full-width, 
.news-page .the-categories {
    float: left;
}

还有我的Wordpress循环：

<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
CrippsTheme_post_thumbnail();
echo '<p class="the-date">';
the_date();
echo '</p>';
//Get the categories
echo '<p class="the-categories">';
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= '<a class="feedcat" href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator;
}
echo trim($output, $separator);
}
echo '</p>';
// End of get categories
echo '<h1 class="entry-title"><a href="';
the_permalink();
echo '">';
the_title();
echo '</a></h1><br class="c" /><p>';
the_excerpt();
echo '</p>';
echo '<p class="read-more"><a href="';
the_permalink();
echo '">Read More...</a></p><br class="c" />';


endwhile;
CrippsTheme_paging_nav();
else :
get_template_part( 'content', 'none' );
endif;
?>

试试这个

在段落开头添加图像（在文本之前，但在“p”标记之后），然后 为具有一定边距的图像添加一些样式，使其可读

<p class="the-date">

 <a class="post-thumbnail" href="http://crippslawtest.co.uk/top-25-law-firms/">
 <img width="270" height="192" style="float:left;margin:0 25px 0 0;" src="http://crippslawtest.co.uk/wp-content/uploads/2014/04/featured-one.jpg" class="attachment-CrippsTheme-full-width wp-post-image" alt="featured-one" /></a>
 April 21, 2014

<a class="feedcat" href="http://crippslawtest.co.uk/category/news/" title="View all posts in News">News</a> <a class="feedcat" href="http://crippslawtest.co.uk/category/press-coverage/" title="View all posts in Press Coverage">Press Coverage</a> <a class="feedcat" href="http://crippslawtest.co.uk/category/reports/" title="View all posts in Reports">Reports</a>
<h1 class="entry-title"><a href="http://crippslawtest.co.uk/top-25-law-firms/">Cripps named one of Top 25  law firms in UK</a>
</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus, metus non mattis pretium, felis diam vehicula leo, ac condimentum orci mi sit amet nisl. Nulla facilisi. Pellentesque pellentesque dui ac facilisis varius. Morbi porta luctus arcu, id vulputate dui pellentesque et. Sed eget nunc sit amet elit euismod auctor et ut nibh. Nullam in [&hellip;]</p>

2014年4月21日
奥雷姆·伊普斯姆·多洛尔·塞特·塞德·卢克图斯、非马蒂斯·普雷蒂姆、利奥·迪姆·维克托·利奥（felis diam vehicula leo）、ac调味品或ac调味品，不带任何设备。不同的设备，不带任何设备，不带任何设备在[&hellip；]

我只是粗略地复制了你的源代码。

---

但主要的想法是在“p”标签后添加图像，并添加样式。

这是您的第一个错误“我已将所有剩余内容都浮动（我指的是所有内容）”.为什么？@Paulie_D我将所有内容都向左浮动，因为我希望我的标题和摘录文本放在我的特色图片旁边。我唯一能想到的方法是向左浮动？你有什么想法？谢谢。也许你可以给我们看一个JSFIDLE中的简化大小写。@Paulie_D我创建了一个js FIDLE，在这里我复制了html和css，这个FIDLE可以工作！但我的答案是否定的！非常令人困惑：我必须用php为我的css写一个if-else吗？：SHi Manu，我在我的php循环中尝试了你的解决方案，在我的p-date标记后添加了CrippsTheme_-post_-thumbnail（）；但它不起作用：（谢谢你的回复）。