html - 我如何将按钮和图像对齐？

Question

我一直在测试并寻找可行的方法。我将此问题用作帮助，但现在我无法将图像放在付款方式按钮的右侧。

垂直均匀分布 DIV

这是我的代码：

.right-column {
		background-color:#f6f7f9;
		border: solid 1px lightblue;
		height:1078px;
        padding:15px;
	}
	.row-heading {
		text-align:center;
		padding:0;
	}
	.payment-img {
		width:84px;
		height:100%;
        padding:0 0 0 15px;
	}
	.paypal-payment {
		width:150px;
		height:45px;
	}
	.cash-payment {
	}
	.payment-rows {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
	}
	.payment-form {
		padding:0;
	}
	.payment-method-checkbox {
		padding:50px 0 0 0;
		font-size:15px;
	}
	.payment-method {
		border:1px solid white;
		background-color:#4ab847;
		color:white;
		height:35px;
		width:100%;
		font-size:12px;
		font-weight:bold;
		text-align:center;
	}
	.payment-method:hover, .payment-method:focus, .payment-method:active {
		color: #4DB748;
		background-color: #ffffff;
		border-color: #4DB748;
	}
	.terms-conditions {
		color:dodgerblue;
	}
	.right-column {
		height:501px;
	}
	.row-heading {
		font-size:22px;
	}
	.reservation_summary, .total_costs {
		font-size:22px;
	}
	.div-btn-paypal, .div-btn-cash, .div-btn-visa  {
        padding:0;
	}
    .visa-payment {
        padding:0;
    }

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 right-column" style="float:right;">
        <h2 class="row-heading">Please Select a Payment Method to Pay for your Reservation</h2>
        <div class="payment-form">
            <form class="payment-form-start" action="/action_page.php">
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-paypal">
                        <input type="button" class="payment-method" value="PayPal">
                        <br>
                    </div>
                    <div>
                        <img class="payment-img paypal-payment" src="https://www.pastepic.xyz/images/2020/03/03/pay_pal65b5eab2fcbb7421.png">
                    </div>
                    <br>
                </div>
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-cash">
                        <input type="button" class="payment-method" value="Cash">
                        <br>
                    </div>
                    <div>
                        <img class="payment-img cash-payment" src="https://www.pastepic.xyz/images/2020/03/03/cash3e374265160bbca9.png">
                    </div>
                </div>
                <br>
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-visa">
                        <input type="button" class="payment-method" value="MasterCard/Visa">
                        <br>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 visa-payment">
                        <img class="payment-img" src="/images/base/maestro.png">
                        <img class="payment-img" src="/images/base/mastercard.png">
                        <img class="payment-img" src="/images/base/visa.png">
                    </div>
                </div>
                <br>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 payment-method-checkbox">
                    <input type="checkbox" class="payment-method-checkbox" required="">
                    <span>I have read, and I agree to the <a href="https://www.amitours.rent/terms-and-conditions" class="terms-conditions" target="_blank">Terms &amp; Conditions</a></span>
                </div>
            </form>
        </div>
    </div>

标签： htmlcssflexboxalignment

Answer 1

有一堆逻辑问题。

你的按钮在一个带有类的 div 中，col-12这意味着 100% 宽度。（引导类）。解决方案：col-8在按钮和col-4图像上使用。或其他加起来等于 12 的类。（10+2、9+3、8+4 等）

然后，您flex-direction: column在payment-row. 您需要设置row或留空，因为行是默认的。

您还需要稍微调整一下 CSS。

还。不要float用于布局。特别是当您已经在使用使用 flexbox 的引导程序时。并利用诸如rowon rows之类的 boostrap 类.container

在此处阅读有关引导网格系统的更多信息 -> bs grid

阅读有关 flexbox 的更多信息 -> flexbox MDN

.right-column {
		background-color:#f6f7f9;
		border: solid 1px lightblue;
		height:1078px;
        padding:15px;
	}
	.row-heading {
		text-align:center;
		padding:0;
	}
	.payment-img {
		width:84px;
		height:100%;
        padding:0 0 0 15px;
	}
	.paypal-payment {
		width:150px;
		height:45px;
	}
	.cash-payment {
	}
	.payment-rows {
        display: flex;
        flex-wrap:wrap;
        justify-content: space-between;
	}
	.payment-form {
		padding:0;
	}
	.payment-method-checkbox {
		padding:50px 0 0 0;
		font-size:15px;
	}
	.payment-method {
		border:1px solid white;
		background-color:#4ab847;
		color:white;
		height:35px;
		width:100%;
		font-size:12px;
		font-weight:bold;
		text-align:center;
	}
	.payment-method:hover, .payment-method:focus, .payment-method:active {
		color: #4DB748;
		background-color: #ffffff;
		border-color: #4DB748;
	}
	.terms-conditions {
		color:dodgerblue;
	}
	.right-column {
		height:501px;
	}
	.row-heading {
		font-size:22px;
	}
	.reservation_summary, .total_costs {
		font-size:22px;
	}
	.div-btn-paypal, .div-btn-cash, .div-btn-visa  {
        padding:0;
	}
    .visa-payment {
        padding:0;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 right-column" style="float:right;">
        <h2 class="row-heading">Please Select a Payment Method to Pay for your Reservation</h2>
        <div class="payment-form ">
            <form class="payment-form-start" action="/action_page.php">
                <div class="payment-rows">
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-3 div-btn-paypal">
                        <input type="button" class="payment-method" value="PayPal">
                        <br>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4">
                        <img class="payment-img paypal-payment" src="https://www.pastepic.xyz/images/2020/03/03/pay_pal65b5eab2fcbb7421.png">
                    </div>
                    <br>
                </div>
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-cash">
                        <input type="button" class="payment-method" value="Cash">
                        <br>
                    </div>
                    <div>
                        <img class="payment-img cash-payment" src="https://www.pastepic.xyz/images/2020/03/03/cash3e374265160bbca9.png">
                    </div>
                </div>
                <br>
                <div class="payment-rows">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 div-btn-visa">
                        <input type="button" class="payment-method" value="MasterCard/Visa">
                        <br>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 visa-payment">
                        <img class="payment-img" src="/images/base/maestro.png">
                        <img class="payment-img" src="/images/base/mastercard.png">
                        <img class="payment-img" src="/images/base/visa.png">
                    </div>
                </div>
                <br>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 payment-method-checkbox">
                    <input type="checkbox" class="payment-method-checkbox" required="">
                    <span>I have read, and I agree to the <a href="https://www.amitours.rent/terms-and-conditions" class="terms-conditions" target="_blank">Terms &amp; Conditions</a></span>
                </div>
            </form>
        </div>
    </div>