添加四个带有迷你边框线的块

时间:2018-12-06 21:11:38

标签: html css

我的代码需要一些帮助。我创建了一个带有白色背景的主标题块,我想添加在同一行中彼此相邻的四个块,我想在中间添加一个大字体文本,在大字体下方添加一个小字体文本字体文本,我也想添加如下所示的迷你边框线:

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>

尝试时,我可以从左到右创建宽度,也可以创建高度,但是我不知道如何在同一行中添加彼此相邻的四个块。而且我也不知道如何为每个块添加迷你边框线,因为您可以在图片中看到细小的灰色线。

能否请您举一个例子,说明如何添加在同一行中彼此相邻的四个图块,在顶部和底部分别添加大小文本,并为每个图块添加一条迷你边框线?

谢谢。

1 个答案:

答案 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/

希望有帮助。