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

它必须有空间让浏览器浮动才能并排渲染它们。

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

1em保证金+ 20％宽度+ 1em保证金

如果你想让下一个块出现在它右边，你需要至少77％的宽度保持在第一个元素的右边。

Answer 2

将其连成一行，并将大小设置为70％ - 30％

<div class="row">

...

</div>

制作两个div并排显示

2 个答案: