Question

在我的单个wordpress帖子中，我想在左右文本中应用100px的填充。问题是，当我将它应用于.single .post-content时，图像也会得到填充。但是，我希望帖子页面上的所有图像都设置为100％。有没有办法将实际的正文和图像分开？这似乎是一个相当简单的问题。但我无法弄明白。任何帮助表示赞赏。

single.php中

＆＃13;

<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
    
    
        <?php $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="banner" style="background:url(<?php echo $featuredImage; ?>) no-repeat;"></div>
    
    
    
<?php wpb_set_post_views(get_the_ID()); ?>    
    <div class="post-info">    
    <h1 class="post-title"><?php the_title(); ?></h1>
   <h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>

    </div>
    <div class="post-content"><?php the_content(); ?></div>
    <div id="wrapper-footer"><div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'post-footer-comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
        <div class="post-footer-bloglovin"><h1>never miss a post</h1><h2><a href="#">follow on email'</a></h2></div></div>
 <?php get_template_part( 'prevandnextpost' ); ?>
     <?php get_template_part( 'related-posts' ); ?>

<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
 
?>

＆＃13;

CSS

＆＃13;

.single .post-title,
.post-title a,
.post-title a:link, .post-title a:visited {
  font-family: 'Questrial', sans-serif;
    font-size:30px;
    margin-left:6px;
margin: 0 auto;
    color:#000000;
    margin-bottom: 3px;
margin-top:30px;
}
.single .post-date {
    font-family: 'Questrial', sans-serif;
    font-size:13px;
    margin-left:6px;
margin: 0 auto;
    color:#000000;
}  
.single .post-content  {
        text-decoration: none;
    color: #000000;
   display: block;
    font-family: 'Crimson Text', serif;
    font-size: 18px;
    margin:0 auto;
    margin-top: -50px;
    padding-left:100px;
    padding-right:100px;
}
.single .post-info {
background:#ffffff;
padding-left: 100px;
    padding-right:100px;
       max-width: 1865px;
    background-position:center;
    background-clip: content-box;
    margin: 0 auto;
    height:110px;
    bottom:100px;
    position: relative;
}
.single img {
    max-width:100%;
    padding: 0 0 0 0 !important;
    height:auto;
}

＆＃13;

Answer 1

您要将填充添加到此选择器（在.post-content元素内搜索.single）：

.single .post-content

尝试在p标记内包装文字：

.post-content p {
    padding-left:100px;
    padding-right:100px;
}

以下示例：

＆＃13;

.post-content {
  text-decoration: none;
  color: #000000;
  display: block;
  font-family: 'Crimson Text', serif;
  font-size: 18px;
  margin: 0 auto;
  margin-top: 0px;
  /* padding-left: 100px; */
  /* padding-right: 100px; */
  width: 300px;
  border: 1px solid gray;
}
.post-content p {
  padding-left: 100px;
  padding-right: 100px;
}

＆＃13;

<div class="post-content">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300×100&w=300&h=100" />
  <p>TEST CONTENT TEST CONTENT OTHER TEST CONTENT TEST LONGER WORD</p>
</div>

＆＃13;

Answer 2

如果您定义：

.single .post-content  {
    ...
    padding-left:100px;
    padding-right:100px;
}

并且图片在.post-content内，然后您需要声明以下规则：

.single img  {
    max-width:100%;
    padding: 0 0 0 0 !important;
    height:auto;
    margin-left: -100px;
    margin-right: -100px;
}

如何只改变正文

2 个答案: