HTML/CSSでネストされた1行と1列の2列の列を取得するには

Question

右の2行のテキストに合わせて左の縦にアイコンを取得する最も簡単な方法を探しています。

私が苦労しているのは、自分のHTMLを整理する方法です。私はこれを機能的に構築することができますが、効率的ではないと思います。だからどのようにこの問題に取り組むことができるかに関するアドバイスは高く評価されています:)。私が達成したいものからのスクリーンショットは以下の通りです。私はFont AwesomeとBootstrap 3を使って開発しています。

Screenshot of what I want to achieve

Answer 1

だけ追加divの表示を変更する必要があるものは何でも

https://jsfiddle.net/q2x9sLo9/

住所

Mirpur新バザールロード、ダッカ-12101

<div style="background-color:#00ced1;display: table-row;"> 
<i class="fa fa-envelope" style="float:left; padding:18px; background-color:#00ced1; color:white; font-size:40px"></i> 
<div style="float:left; background-color:#00ced1; color:white;"> 
<h4> 
E-mail 
</h4><p> 
example@info.com 
</p> 
</div> 
</div> 

<div style="background-color:#00ced1;display: table-row;"> 
<i class="fa fa-phone" style="float:left; padding:18px; background-color:#00ced1; color:white; font-size:59px"></i> 
<div style="float:left; background-color:#00ced1; color:white;"> 
<h4> 
Phone 
</h4><p> 
(732) 803-01 03 
</p> 
</div>`` 
</div> 

Answer 2

あなたはこのような何かを意味ですか？ただ、使用画像とテキストを変更し、あなたは、テーブルの行に

.col-xs-12 { 
 
    background-color: pink; 
 
} 
 

 
._imgContainer { 
 
    position: relative; 
 
} 
 

 
._imgContainer>._icon { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform:translate(-50%,25%); 
 
    width: 50px; 
 
    height: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-xs-2 _imgContainer"> 
 
      <image class="_icon" src="http://www.jqueryscript.net/images/jQuery-Plugin-For-Fullscreen-Image-Viewer-Chroma-Gallery.jpg" /> 
 
     </div> 
 
     <div class="col-xs-10 _textContainer"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 3

.box{padding:10px; background:#7cc5ef;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 

 
<div class="container"> 
 
<h1>Contact Address</h1><br> 
 
\t <div class="row text-center"> 
 
\t \t 
 
\t \t <table class="col-sm-3 col-xs-6 box"> 
 
      <tr > 
 
      <th class="glyphicon glyphicon-earphone" style="font-size:30px;"></th> 
 
      <td> <b>Phone</b></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td> +01-009940-998569></td> 
 
     </tr> 
 
      
 
       <tr > 
 
      <th class="glyphicon glyphicon-home" style="font-size:30px;"></th> 
 
      <td> <b>Location</b></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td> 6th Sun Road</td> 
 
     </tr> 
 
       <tr > 
 
      <th class="glyphicon glyphicon-send" style="font-size:30px;"></th> 
 
      <td> <b>E-mail</b></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td> info@sun.com</td> 
 
     </tr> 
 
       <tr > 
 
      <th class="glyphicon glyphicon-leaf" style="font-size:30px;"></th> 
 
      <td> <b>Web</b></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td> me@me.com</td> 
 
     </tr> 
 
     
 
     </table> 
 
     </div> 
 
</div>