如何使在同一行3盒？

-2

<!-- 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盒，但問題是他們不在同一行如何使他們在同一行。

來源

2017-02-18 Петър Димитров

嘗試codepen接下來的時間，https://codepen.io/ –

最簡單的方法是把一個float: left所有箱子，讓他們可以在同一條線上時，有足夠的空間。

另一種方法是使用display: flex;，你可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/閱讀更多關於flex財產。

如果您是CSS初學者，我的建議是使用一些前端框架（如Bootstrap）爲您提供一個想法，即如何使用行和列排版頁面。一旦你熟悉了，你可以寫自己的CSS佈局任何你想要的設計。

http://getbootstrap.com/

來源

2017-02-18 08:41:27

好，我現在有一個問題.. http://prntscr.com/ea8ppf看。 .. 3TH盒更大：d –

這可能是因爲盒子裏面的內容是太大。嘗試設置'最大寬度：100％'對箱內圖像。 –

現在圖像大小不錯，但它又在另一行上。http://prntscr.com/ea8s9e –

使用引導CSS將幫助你很多，因爲在引導每個工作區分爲行和列，每一行有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 columns.4 * 3 = 12，所以在這裏你行已準備就緒，你可以使用進一步的造型爲每您的要求，但第一get bootstrap

來源

2017-02-18 08:59:12

您可以使用Flexbox將實現這一目標。請參閱瀏覽器支持here.

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

<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>

來源

2017-02-18 09:39:27

如何使在同一行3盒？

回答

相關問題