以下圖片和文字的水平表菜單

Question

剛開始創建一些基本的網頁，我想問一下：將3列（在JsFiddle中看到）複製到如下所示的「正確」方法是什麼：

你用什麼來製作另一個像這樣的表格行，並將圖片與文本居中？

JsFiddle

代碼：

<div class="content4"> <img src="http://placehold.it/67x67"> 
    <div class="main"> 
    <ul class="infoBar"> 
     <li> <a href="#">god</a> 
     <div class="infoBarText">foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo </div> 
     </li> 
     <li> <a href="#">damn</a> 
     <div class="infoBarText">foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf <br> 
      foobarfoobarf oobarfoo barfooba </div> 
     </li> 
     <li> <a href="#">menus</a> 
     <div class="infoBarText">foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf oobarfoo <br> 
      foobarfoobarf oobarfoo barfooba <br> 
      foobarfoobarf <br> 
      foobarfoobarf oobarfoo barfooba </div> 
     </li> 
    </ul> 
    </div> 
</div> 

樣式表：

.main { 
    margin: 0 auto; 
    width: 1150px; 
    font-family: 'Roboto'; 
    font-size: 16; 
} 

.content4 { 
    background: white; 
    height: 580px; 
} 

.infoBar li { 
    list-style: none; 
    float: left; 
    margin-top: 30px; 
    margin-left: 50px; 
} 

.infoBar a { 
    color: black; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-style: italic; 
} 

.infoBarText { 
    margin-top: 25px; 
    color: black; 
    font-size: 14; 
} 

Answer 1

使用經典的方法：

<div class="content4"> 
    <div class="main"> 
     <table class="infoBar"> 
      <tr> 
       <td> 
        <img src="http://placehold.it/67x67"> 
       </td> 
       <td><a href="#">god</a> 
       </td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td> 
        <span class="infoBarText">foobarfoobarf oobarfoo barfooba 
         <br>foobarfoobarf oobarfoo barfooba 
         <br>foobarfoobarf 
         <br>foobarfoobarf oobarfoo barfooba 
         <br>foobarfoobarf oobarfoo barfooba 
         <br>foobarfoobarf oobarfoo barfooba 
         <br>foobarfoobarf oobarfoo 
        </span> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 2

爲什麼要使用表？使用三個div並應用display：inline-block。您還可以使用引導網格系統，使其響應

請參閱本文檔

http://getbootstrap.com/css/#grid

甚至更​​好，你可以使用網格系統來與它3列上創建兩個單獨的行。可以b類似

<div class="row"> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
     1 
    </div> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
     2 
    </div> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
     3 
    </div> 
</div> 

<div class="row"> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
     4 
    </div> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
     5 
    </div> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> 
     6 
    </div> 
</div>