spanとdivを使用して2行のテキストをアイコンの横に表示する

Question

私は画像のようにUIを実現するためにdivsとspanを使っています。私はCSSのプロパティで打たれています。

https://v4-alpha.getbootstrap.com/utilities/flexbox/#justify-content：私はCSSでこれを実現するにはどうすればよい

これはサンプルHTML

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

<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>

Answer 1

あなたはブートストラップ4を使用し、Flexプロパティを楽しむことがあります

コンテンツを揃え

使用を正当化するコンテンツメイン軸上フレックス項目の配置を変更するフレキシボックスコンテナにユーティリティ（起動するx軸、y軸場合フレックス方向：カラム）。開始（ブラウザのデフォルト）、終了、中央、間、または周りから選択します。

あなたのクラス名を更新し<div class=" d-flex justify-content-between">

/* 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; 
 
}

<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>

codepen and flex to play with

Answer 2

チェックこれに<div class=" row">を回すことができます。

.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>