埋め込みのない要素の整列

Question

divを使用して完全に整列されたテーブルを作成しようとしています。これまでのところ、これは私が持っているものです。

私は、行全体の左側にある時間区間が、そうのようなスペース差の作成を停止するために整列テキスト権利を持って探しています：

私は text-align: right;と direction: rtlを使用して、よりdivタグが、何もない約遊んでみました

は、これまで動作しているようです。

関連のhtml：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="header"> 
      <h1>EVENTS SCHEDULE</h1> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-2"></div> 

     <div class="col-lg-8 date"> 
      <h4>Thursday, January 26th</h4> 
     </div> 

     <div class="col-lg-2"></div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-2"></div> 

     <div class="col-lg-8 event"> 
      <span class="event-time"> 1:00 PM</span> 

      <h5 class="event-title">Special Olympics Unified Snowboarding Final</h5> 
      <dd>SLOPESTYLE</dd> 
     </div> 

     <div class="col-lg-2"></div> 
    </div> 

関連するCSS：

.date { 
    background: rgba(26, 26, 26, 1); 
    color: #fff; 
    padding-left: 20px; 
} 

.event { 
    color: #fff; 
    background: rgba(0, 0, 0, 0.4); 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.event-time { 
    font-size: 20px; 
    font-family: "Arial", Arial, sans-serif; 
    direction: rtl; 
} 

.event-title { 
    text-align: left; 
    line-height: .5em; 
    font-size: 20px; 
    font-family: "Arial", Arial, sans-serif; 
    display: inline-block; 
    padding-left: 80px; 
} 

.event dd { 
    display: block; 
    font-size: 12px; 
    font-family: "Verdana", Verdana, sans-serif; 
    padding-left: 150px; 
} 

Answer 1

あなたは、ブートストラップクラスを使用しているので、あなたが表示している画面の大きさは、あなたの位置合わせのための下層階級を試してみたいことがあります大規模に出会えないかもしれない。

ので、あなたのHTMLが

<div class="col-md-8 date"> 
     <h4>Thursday, January 26th</h4> 
    </div> 

    <div class="col-md-2"></div>