文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我将如何对齐按钮和图像相邻的其他？

问我将如何对齐按钮和图像相邻的其他？
EN

Stack Overflow用户
提问于 2020-03-05 13:30:54
回答 2查看 41关注 0票数 0

我一直在测试和寻找方法，使这一工作。我用这个问题作为帮助，但现在我不能得到的图像是右边的支付方法按钮。

垂直均匀空间DIVs

这是我的代码：

​

代码语言：javascript
复制
.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;
    }
代码语言：javascript
复制
<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>

​

html
css
flexbox
alignment
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-05 13:46:04

有很多逻辑上的问题。

您的按钮在col-12类的div中，这意味着100%的宽度。(引导类)解决方案:对按钮使用col-8，对图像使用col-4。或添加等于12的其他类( 10+2、9+3、8+4等)

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

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

还有。不要使用float进行布局。特别是当您已经使用引导，它使用的挠性盒。并使用引导类，如行上的row和.container等等。

在这里阅读有关引导网格系统的更多信息-> bs网格

阅读有关柔性盒-> 挠曲箱MDN的更多信息

​

代码语言：javascript
复制
.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;
    }
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2020-03-05 13:52:39

设置flex方向: css中的付款行类中的行

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/60546516

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档