製作兩個div並排顯示

因此，在此頁面上，我想將文本放在圖像旁邊，而不是放在下面。製作兩個div並排顯示

http://www.helensheardfloraldesigns.co.uk/testimonials/

這是我目前的CSS：

<?php 

// check if the repeater field has rows of data 
if(have_rows('testimonial')): 

// loop through the rows of data 
while (have_rows('testimonial')) : the_row(); ?> 

    <div style="float:left; width:20%; background:#EEE; margin:1em;"> 
     <img class="testimonial-image" style="width:100%;;" src="<?php echo get_sub_field('image'); ?>" /> 
    </div> 

    <div style="float:left; width:77%;"> 
     <p><?php echo get_sub_field('text'); ?></p> 
    </div> 


<?php endwhile; 

else : 

// no rows found 

endif; 

?>

我將如何設置樣式使文本出現在圖片的右側並沒有下文？

來源

2016-05-30 Quarismo

1.不要混合使用'％'和'em'（你知道在某些時候會打破你？）。 2.不要使用內聯樣式（這是維護的噩夢）。 –

，必須有房是浮動的瀏覽器並排，使它們一邊。

邊緣的寬度不包括在該塊的20％，所以現在你已經

1EM保證金+ 20％的寬度+ 1EM保證金

，如果你想下一個塊出現權它至少需要第一個元素的77％左右的寬度。

來源

2016-05-30 19:03:22

把它放在一排，並設置規模70％ - 30％

<div class="row"> 

... 

</div>

來源

2016-05-30 19:02:33

製作兩個div並排顯示

回答

相關問題