我的代码需要一些帮助。我创建了一个带有白色背景的主标题块,我想添加在同一行中彼此相邻的四个块,我想在中间添加一个大字体文本,在大字体下方添加一个小字体文本字体文本,我也想添加如下所示的迷你边框线:
https://i.imgur.com/mUsBTMH.png
代码如下:
<style type="text/css">
body {
background-color: #edf1f5;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #edf1f5;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main-row {
background: #ffffff;
padding: 25px;
margin-top: 30px;
/* position: relative; */
/* min-height: 1px; */
/* padding-right: 15px; */
padding-left: 15px;
margin-bottom: 30px;
/* margin-right: -38px; */
margin-left: 30px;
width: 93%;
height: 60px;
/* display: table; */
content: " ";
}
.middle-row {
width: 20%;
height: 60px;
margin-top: 5px;
margin-left: 30px;
}
.middle-number {
font-size: 38px;
font-weight: bold;
margin: 0 0 10px 0;
white-space: nowrap;
padding: 0;
text-align: center;
}
.lower-text {
font-size: 16px;
white-space: nowrap;
margin: 0 0 10px 0;
padding: 0;
text-align: center;
margin-top: 40px;
}
</style>
<body>
<div class="main-row">
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Opened</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Click Rate</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Subscribers</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">UnSubscribers</span>
</div>
</div>
</body>
尝试时,我可以从左到右创建宽度,也可以创建高度,但是我不知道如何在同一行中添加彼此相邻的四个块。而且我也不知道如何为每个块添加迷你边框线,因为您可以在图片中看到细小的灰色线。
能否请您举一个例子,说明如何添加在同一行中彼此相邻的四个图块,在顶部和底部分别添加大小文本,并为每个图块添加一条迷你边框线?
谢谢。
答案 0 :(得分:2)
下面是一个包含4个块的示例:
body {
background-color: #edf1f5;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main-row {
background: #ffffff;
padding: 25px;
margin-top: 30px;
padding-left: 15px;
margin-bottom: 30px;
margin-left: 30px;
width: 93%;
height: 60px;
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
justify-content: center;
align-items: center;
}
.middle-row {
min-width: 100px;
text-align: center;
}
.middle-row:not(:last-of-type) {
border-right: 1px solid #ccc;
}
<div class="main-row">
<div class="middle-row">
<p>11</p>
<p>Text</p>
</div>
<div class="middle-row">
<p>22</p>
<p>Text</p>
</div>
<div class="middle-row">
<p>33</p>
<p>Text</p>
</div>
<div class="middle-row">
<p>44</p>
<p>Text</p>
</div>
</div>
这里还有一个指向Flexbox指南的链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/。
希望有帮助。