Эхо в одной строке

Question

Это мой первый пост, поэтому я надеюсь, что все делаю правильно.

Я хочу добавить следующий код PHP на свой сайт. Код должен отображать 1-3 изображения в зависимости от идентификатора продукта. Первое изображение отображается на каждой странице продукта, следующие два будут отображаться в зависимости от идентификатора.

Все работает отлично, но я не могу отображать изображения в один ряд. Прямо сейчас изображения отображаются друг под другом.

Не могли бы вы посоветовать мне?

/**
 * Add a selling points to single product page
 */
add_action( 'woocommerce_before_add_to_cart_form', 'bbloomer_single_product_ID', 10 );

function bbloomer_single_product_ID() {
 if(is_single()){
    echo '<div class="product_delivery_icon">
        <div class="pdf">
          <div class="pdf_icon">
            <img src="demo1.png">
          </div>
          <div class="pdf_name">Description 1</div>
        </div>
  </div>';
}if (is_single(array(1, 2, 3))){
    echo '<div class="product_delivery_icon">
        <div class="pdf">
          <div class="pdf_icon">
            <img src="demo2.png">
          </div>
          <div class="pdf_name">Description 2</div>
        </div>
  </div>';
}if (is_single(array(2, 4))){
    echo '<div class="product_delivery_icon">
        <div class="pdf">
          <div class="pdf_icon">
            <img src="demo3.png">
          </div>
          <div class="pdf_name">Description 3</div>
        </div>
  </div>';
}
}

Answer 1

это проблема css, я думаю, добавьте CSS как:

<div style="position:relative">
    <div style="float:left; width: 50px; height:100px; background-color:red;">image1</div>
    <div style="float:left; width: 50px; height:100px; background-color:blue;">image2</div>
    <div style="float:left; width: 50px; height:100px; background-color:green;">image3</div>
</div>