如何水平对齐两个DIV答案

【问题标题】：How to horizontally align two DIV如何水平对齐两个DIV
【发布时间】：2020-10-17 23:50:46
【问题描述】：

我有这段代码，我想将 variation-options 选项与右侧的 woo-price-area 对齐：

        <div class="woo-button-area">

            <div class="variations variation-price-wrap">
                <div class="variation-options">
                    <select id="opt" class="" name="attribute_pa_opt" data-attribute_name="attribute_pa_opt"
                            data-show_option_none="no">
                        <option value="opt1" class="attached enabled">Option 1</option>
                        <option value="op2" class="attached enabled">Option 2</option>
                    </select></div>
                <div class="woo-price-area">
                    <p class="price">
                        <del><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>9.00</span></del>
                        <ins><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>5.00</span></ins>
                    </p>
                    <div class="wc-availability"></div>
                </div>
            </div>


            <div class="single_variation_wrap">
                <div class="woocommerce-variation single_variation" style="">
                    <div class="font80">
                        <a rel="nofollow" href="#details" class="csspopuptrigger" data-popup="details">Details</a>
                    </div>
                    <div class="prosconswidget">
                        <div class="wpsm_pros mt20 font80">
                            <ul>
                                <li>Test li</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>

我尝试过浮动，但详情链接超出了价格区域。

这是页面网址：https://jsfiddle.net/4x93rLmf/21/

【问题讨论】：

显示实际页面。我会给你正确的代码。
jsfiddle.net/4x93rLmf/21
@MoradAngel 如果这就是你想要的，请不要忘记接受答案
你可以尝试添加 line-height:12px 或 16px 可能会修复它
你应该重新发布你删除的问题，我可以回答，如果你愿意的话：stackoverflow.com/q/62759419/3730754

标签： css css-float vertical-alignment

【解决方案1】：

你可以定位他们的包装类.variations.variation-price-wrap{display:flex;}

.variations.variation-price-wrap{display:flex;  
                                 justify-content:space-between;}
p.price {
    display: flex;
    flex-direction: column;
    margin: 0;
}

<div class="woo-button-area">

            <div class="variations variation-price-wrap">
                <div class="variation-options">
                    <select id="opt" class="" name="attribute_pa_opt" data-attribute_name="attribute_pa_opt"
                            data-show_option_none="no">
                        <option value="opt1" class="attached enabled">Option 1</option>
                        <option value="op2" class="attached enabled">Option 2</option>
                    </select></div>
                <div class="woo-price-area">
                    <p class="price">
                        <del><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>9.00</span></del>
                        <ins><span class="woocommerce-Price-amount amount"><span
                                        class="woocommerce-Price-currencySymbol">£</span>5.00</span></ins>
                    </p>
                    <div class="wc-availability"></div>
                </div>
            </div>


            <div class="single_variation_wrap">
                <div class="woocommerce-variation single_variation" style="">
                    <div class="font80">
                        <a rel="nofollow" href="#details" class="csspopuptrigger" data-popup="details">Details</a>
                    </div>
                    <div class="prosconswidget">
                        <div class="wpsm_pros mt20 font80">
                            <ul>
                                <li>Test li</li>
                            </ul>

                        </div>
                    </div>
                </div> </div>
            </div>

【讨论】：

已对齐但价格不正确，实际价格 9 应低于 5 且全部浮动
请检查更新并告诉我这是否是您想要的
没有选择选项应该在左边，价格在右边
我怎样才能得到css？我看到运行代码 sn-p 但 css 代码在哪里？
它之前的 html 是你想要的吗？