html - 使两个div并排出现

Question

所以在这个页面上，我想把文字放在图片旁边，而不是图片下面。

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;

?>

我应该如何设置样式才能使文本显示在图像的右侧而不是下方？

Answer 1

它必须有 float 空间，以便浏览器并排呈现它们。

边距的宽度不包括在 block 的 20% 中，所以现在你有

1em 边距 + 20% 宽度 + 1em 边距

如果您希望下一个 block 出现在它的右侧，您至少需要第一个元素右侧剩余宽度的 77%。