使用span和div在图标旁边获取2行文本

Question

我正在使用div和span来实现UI，如图所示。我对css属性感到震惊。我怎样才能用css实现这个目标

这是示例html

＆＃13;

＆＃13;

.row .logo {float:left;}
.row .venue {float:right;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
<div class="logo">
O
<span class="a">
zeee
</span>
<span class="b">
2017
</span>
</div>

<div class="venue">
<i class="fa fa-calendar" aria-hidden="true"></i>
<span class="a">
MyDate
</span>
<span class="b">
MyLocation
</span>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用boostrap 4并享受弹性属性：

https://v4-alpha.getbootstrap.com/utilities/flexbox/#justify-content

  

对齐内容

     

在flexbox容器上使用justify-content实用程序来更改主轴上弹性项目的对齐方式（x轴为开始，y轴为flex-direction：column）。从开始（浏览器默认），结束，居中，中间或周围选择。

您可以更新您的班级名称，并将<div class=" row">转为<div class=" d-flex justify-content-between">

＆＃13;

＆＃13;

/* demo purpose only */
.logo {
  color: green;
  font-size: 40px;
  font-weight: bold;
}

.logo :first-child {
  font-size: .65em;
  color: purple;
  vertical-align: bottom;
}

.logo :last-child {
  font-size: 0.35em;
  word-wrap: break-word;
  width: 1.5em;
  display: inline-block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" d-flex justify-content-between">
  <div class="logo">
    O
    <span class="a">
zeee
</span>
    <span class="b">
2017
</span>
  </div>

  <div class="venue">
    <i class="fa fa-calendar" aria-hidden="true"></i>
    <span class="a">
MyDate
</span>
    <span class="b">
MyLocation
</span>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

codepen and flex to play with

Answer 2

检查一下：

.row .logo {
  float: left;
}

.row .venue {
  float: right;
}

.fa {
  font-size: 36px !important;
}

#calender {
  float: left;
}

#text {
  float: right;
}

#o {
  font-size: 64px !important;
  color: #07b512;
  display: flex;
  float: left;
}

#zee {
  display: flex;
  float: left;
  color: #3b1670;
  font-weight: bold;
  padding-top: 40%;
  margin-right: 12px;
}

#year {
  display: flex;
  width: 25px;
  color: #8e1b30;
  word-break: break-word;
  font-size: 23px;
  font-weight: bold;
}
.a,.b{
color:blue;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row">
  <div class="logo">
    <div id="o">
      O
    </div>
    <div id="zee" class="a">
      zeee
    </div>
    <div id="year" class="b">
      2017
    </div>
  </div>

  <div class="venue">
    <div id="calender">
      <i class="fa fa-calendar fa-6" aria-hidden="true"></i>
    </div>
    <div id="text">
      <div class="a">
        MyDate
      </div>
      <div class="b">
        MyLocation
      </div>
    </div>
  </div>

</div>