如何在创世纪列类中使用CSS网格?我尝试下面的代码,但列高不相等。
.one-half.first {
border: 1px solid #00569d;
padding: 10px;
display: table-cell;
}
.one-half {
width: 50%;
}
.one-half {
float: left;
}
.col-container {
display: table;
width: 100%;
}
@media only screen and (max-width: 600px) {
.one-half {
display: block;
width: 50%;
}
}
<div class="col-container">
<div class="one-half first">
<h3 style="text-align: center;">Important Dates</h3>
<ul style="list-style-type: square;">
<li><strong>Starting Date:</strong> 09-11-2018</li>
<li><strong>Last Date:</strong> 30-11-2018</li>
</ul>
</div>
<div class="one-half">
<h3 style="text-align: center;">Application Fee</h3>
<ul style="list-style-type: square;">
<li><strong>Rs.50/- :</strong> For All Candidates</li>
</ul>
</div>
</div>
以上代码的最终结果
最佳答案
对于父容器,即col-container
将grid-template-columns
分别设置为50%。
.col-container {
display: grid;
grid-template-columns: 50% 50%;
}
.one-half {
border: 1px solid #00569d;
padding: 10px;
display: table-cell;
}
<div class="col-container">
<div class="one-half first">
<h3 style="text-align: center;">Important Dates</h3>
<ul style="list-style-type: square;">
<li><strong>Starting Date:</strong> 09-11-2018</li>
<li><strong>Last Date:</strong> 30-11-2018</li>
</ul>
</div>
<div class="one-half">
<h3 style="text-align: center;">Application Fee</h3>
<ul style="list-style-type: square;">
<li><strong>Rs.50/- :</strong> For All Candidates</li>
</ul>
</div>
</div>
关于html - 如何在创世纪列类中使用CSS网格?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53361164/