Question

刚开始创建一些基本的网页，我想问一下：将3列（在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并应用display：inline-block。您还可以使用引导网格系统使其响应

请参阅此文档

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

或者甚至更好，您可以使用网格系统创建两个单独的行，其中包含3列。可能像

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

Answer 2

使用经典方法：

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

与下面图片和文本的水平的桌菜单

2 个答案: