Question

这是我的代码：

<!-- Home Boxes Section2 -->
<?php
    for($bx=1; $bx<2; $bx++) { 
        if( get_theme_mod('page-setting'.$bx)) { 
            $bxquery = new WP_query('page_id='.get_theme_mod('page-setting'.$bx,true)); 
            while( $bxquery->have_posts() ) : $bxquery->the_post(); 
                ?>
                <div class="one_third <?php if($bx%3==0){ ?>last_column<?php } ?>">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?>
                        <h4><?php the_title(); ?></h4>
                        <?php echo fitnesslite_content(22); ?>
                        <span class="ReadMore"><?php _e('Read More','fitness-lite');?></span>
                    </a>
                </div>
                <?php
            endwhile;
        }
        else{?>
            <div class="one_third <?php if($bx%3==0){ ?>last_column<?php } ?>"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/thumb_02.jpg"><h4><?php _e('sadasdaPage Title','fitness-lite'); ?><?php echo $bx; ?></h4><p><?php _e('Phasellus viverra aliquet magna quis interduming. Sed quis fringilla massa. In ut porttitor felis necing iaculis mi. Proin tempo...','fitness-lite');?></p><span class="ReadMore"><?php _e('Read More','fitness-lite');?></span></a></div>                        
            <?php
        }
    }
?>
<!-- Home Boxes Section -->

这是我的问题？如何让它们在同一条线上？这是1个盒子的代码，我粘贴了3次，得到3个盒子，但问题是它们不在同一行中如何使它们在同一行。

Answer 1

最简单的方法是为所有框添加float: left，以便在有足够空间时它们可以在同一行。

替代方法是使用display: flex;，您可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/了解有关flex属性的更多信息。

如果您是CSS初学者，我的建议是使用一些前端框架（如Bootstrap）来了解如何使用row和col布局页面。熟悉之后，您可以编写自己的CSS来布局任何您想要的设计。

http://getbootstrap.com/

Answer 2

使用bootstrap css会帮助你，因为bootstrap中的每个工作区都分为行和列，每行有12列。所以你可以试试这个：

 <div class="row">
    <div class="col-lg-4">Box1</div>
    <div class="col-lg-4">Box2</div>
    <div class="col-lg-4">Box3</div>
</div>

我已经使用了col-lg-4 3次，因为一行有12列.4 * 3 = 12，所以这里你的行准备就绪，你可以根据你的要求使用进一步的样式但是get bootstrap < / p>

Answer 3

您可以使用flexbox来实现此目的。请参阅浏览器支持here.

＆＃13;

.box-wrapper {
  display: flex;
  
  justify-content: space-around;
}
.box { 
  flex: 1;
  
  margin: 10px;
  padding: 10px;
  background: #aaa;
}

＆＃13;

<div class="box-wrapper">
  <div class="box one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie aliquet nunc eget egestas. Suspendisse nisi felis, commodo volutpat orci suscipit, efficitur fermentum diam. Mauris posuere pellentesque fermentum. Aenean id rhoncus metus. Nullam ac urna sapien. Pellentesque vestibulum, ipsum ac vehicula imperdiet, eros ex elementum arcu .</div>
  <div class="box two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie aliquet nunc eget egestas. Suspendisse nisi felis, commodo volutpat orci suscipit, efficitur fermentum diam. Mauris posuere pellentesque fermentum. Aenean id rhoncus metus. Nullam ac urna sapien. Pellentesque vestibulum, ipsum ac vehicula imperdiet, eros ex elementum arcu, non fringilla risus dolor id eros. Nullam interdum mauris eu augue ornare facilisis. Curabitur purus libero, hendrerit ut diam id, facilisis mattis felis. Nulla facilisi.</div>
  <div class="box three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie aliquet nunc eget egestas. non fringilla risus dolor id eros. Nullam interdum mauris eu augue ornare facilisis. Curabitur purus libero, hendrerit ut diam id, facilisis mattis felis. Nulla facilisi.</div>
</div>

＆＃13;

如何在同一行中制作3个盒子？

3 个答案: