我需要帮助来修复模态框内不同卡片的 CSS。我希望所有卡片对其中的不同内容使用相同的列宽。这样所有的卡片看起来都是对称的。查看下图，它们看起来都是锯齿形的。检查不同卡片中购买按钮的对齐情况。
<!--Card-->
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<input type="text" id="market-search" onkeyup="marketSearch()" placeholder="Search for stock names..">
<i class="fa fa-times" data-dismiss="modal"></i>
</div>
<div class="modal-body">
<div class="container">
<div class="card stock-card" data-name="{{ stock.name }}">
<div class="card-body">
<h4 class="card-title">ABB India Ltd.</h4>
<div class="market-info">
<p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
<p class="card-text stock-info up" id="diff"> 9.45
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</p>
<p class="card-text stock-info"><strong>$</strong> <span id="price">1340</span></p>
<p class="card-text stock-info">ABB</p>
<input id="input_{{stock.code}}"/>
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
</div>
</div>
</div>
<div class="card stock-card" data-name="{{ stock.name }}">
<div class="card-body">
<h4 class="card-title">ACC Ltd.</h4>
<div class="market-info">
<p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
<p class="card-text stock-info up" id="diff"> 19.45
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</p>
<p class="card-text stock-info"><strong>$</strong> <span id="price">134</span></p>
<p class="card-text stock-info">ACCBank</p>
<input id="input_{{stock.code}}"/>
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
</div>
</div>
</div>
<div class="card stock-card" data-name="{{ stock.name }}">
<div class="card-body">
<h4 class="card-title">INFY </h4>
<div class="market-info">
<p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
<p class="card-text stock-info down" id="diff"> 0.45
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</p>
<p class="card-text stock-info"><strong>$</strong> <span id="price">805</span></p>
<p class="card-text stock-info">INFOSYS</p>
<input id="input_{{stock.code}}"/>
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
</div>
</div>
</div>
<div class="card stock-card" data-name="{{ stock.name }}">
<div class="card-body">
<h4 class="card-title">ABBACUS India Ltd.</h4>
<div class="market-info">
<p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
<p class="card-text stock-info up" id="diff"> 9.45
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</p>
<p class="card-text stock-info"><strong>$</strong> <span id="price">13</span></p>
<p class="card-text stock-info">ABBACUS</p>
<input id="input_{{stock.code}}"/>
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
</div>
</div>
</div>
<div class="card stock-card" data-name="{{ stock.name }}">
<div class="card-body">
<h4 class="card-title">Reliance</h4>
<div class="market-info">
<p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
<p class="card-text stock-info up" id="diff"> 9.45
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</p>
<p class="card-text stock-info"><strong>$</strong> <span id="price">1200</span></p>
<p class="card-text stock-info">RELIANCE</p>
<input id="input_{{stock.code}}"/>
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.card {
margin-top: 2rem;
}
.card .card-title {
font-weight: 300;
}
.card .market-info .card-text {
font-weight: 400;
}
.card .market-info .stock-info
{
display: block;
float: left;
padding: 0 1em;
text-align: right;
}
.card .market-info .up {
color: green;
}
.card .market-info .down {
color: red;
}
.card .market-info input{
max-width:60px;
margin-right:5px;
padding:4px;
}
.card .market-info .stock-info
{
display: block;
float: left;
padding: 0 10px;/*Change HERE*/
text-align: right;
}
.card .market-info{
display:flex;
flex-wrap:wrap;
align-items:center;
}
.card .market-info p{
margin:0;
}
.modal-lg {
max-width: 40% !important;
}
我无法修复它。非常感谢这里的任何帮助？
Codepen 链接 https://codepen.io/agrawalo/pen/NWKaWMm
最佳答案
添加这个CSS
.card .market-info{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between; /*Add this property*/
}
关于html - 对齐模态框中所有卡片的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57752666/