一行回声

Echo in one line

这是我的第一个 post,所以我希望我做的一切都是正确的。

我想将以下 PHP 代码添加到我的站点。该代码应该根据产品 ID 显示 1-3 个图像。第一张图片显示在每个产品页面上,接下来的两张图片将根据 id 显示。

一切正常,但我无法在一行中显示图像。现在,图像显示在彼此下方。

你能给我建议吗?

/**
 * 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>';
}
}

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