html - 对齐模态框中所有卡片的内容
问题描述
我需要帮助来修复模式框中不同卡片的 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*/
}
推荐阅读
- java - 如何使我的应用程序延迟并在循环的每次迭代中更新布局的组件
- c - 如何在 C 中有效地拆分字符串和复制子字符串?
- r - 从 data.table 包中读取带有 fread 函数的 zip 文件时出错
- docker - 如何在 Dockerfile 中将 Ubuntu 包/存储库转换为 Alpine?
- angular - Angular 7 从 json 中获取多个值
- java - 混淆行为与数组初始化——处理(Java)
- javascript - 有没有办法在网页中制作交互式独立 SVG?
- javascript - Testcafe 更容易检查页面上是否存在类选择器
- php - 如何将 PHP 数据发送到 html 标签?
- r - 使用 R 从 Web 中抓取列