如何獲得一列，一列和一列嵌套在HTML/CSS中的兩行

Question

我正在尋找最簡單的方法來獲取左側垂直圖標與右側兩行文本對齊。

我正在努力的是我必須組織我的HTML。我可以在功能上構建這個，但我認爲這不是高效/清理的方式（代碼太多）。所以，關於如何解決這個問題的任何建議都非常感謝:)。下面是我想要實現的屏幕截圖。我正在使用Font Awesome和Bootstrap 3進行開發。

Screenshot of what I want to achieve

Answer 1

只需添加格顯示錶行

https://jsfiddle.net/q2x9sLo9/

地址

米爾布爾新巴扎爾路，達卡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>