使用materializecss将图像与各个表格对齐[关闭]

Question

在这里找到完整的代码：http://codepen.io/anon/pen/NxErrR

我试图显示不同的表格及其各自的图像。以下是实际要求的屏幕截图。这是要求。

这就是我取得的进展。

注意：我正在使用materializecss，并且很高兴使用相同的方法实现这一点。

   <div class="row">
     <div class="featuresanimate">
       <div id="features" class="section scrollspy">
         <div class="container">
           <h2 style="text-decoration:underline;text-align:center;font-  weight:bold;font-family:Comic Sans MS">Features</h2><br><br>
             <div class="features">
               <table style="width:100%">
                 <tr>
                   <img src="images/d.png" height="100" width="100">
                   <th >one</th>
                   <img src="images/a.png" height="100" width="100">
                   <th >two</th>
                 </tr>

                 <tr>
                   <td >profile</td>
                   <td >profile</td>
                 </tr>

                 <tr>
                   <td>profile</td>
                   <td>profile</td>
                 </tr>

                 <tr>
                   <td>profile</td>
                   <td>profile</td>
                 </tr>

                 <tr>
                  <td>profile</td>
                  <td>profile</td>
                 </tr>

                </table>          
             </div> 
           </div>
        </div>
      </div>
    </div>

Answer 1

看起来你正在使用Materialize CSS框架。我会抛弃table-for-layout方法并使用框架提供的grid system。看到working Codepen demo here。

h3 {
  margin-top: 0;
  padding-left: 10px;
  color: #fff;
  background-color: #0d47a1;
}

img {
  float: left;
  margin-right: 15px;
}

.feature-set {
  float: right;
  width: calc(100% - 115px);
}

ul {
  padding-left: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
  <div class="featuresanimate">
    <div id="features" class="section scrollspy">
      <div class="container">
        <h2 style="text-decoration:underline;text-align:center;font-weight:bold;font-family:Comic Sans MS">Features</h2>
        <div class="features">
          <div class="col s6">
            <img src="http://placehold.it/100x100" height="100" width="100">
            <div class="feature-set">
              <h3>One</h3>
            <ul>
              <li>profile</li>
              <li>profile</li>
              <li>profile</li>
              <li>profile</li>
            </ul>
            </div>            
          </div>
          <div class="col s6">
            <img src="http://placehold.it/100x100" height="100" width="100">
            <div class="feature-set">
              <h3>Two</h3>
            <ul>
              <li>profile</li>
              <li>profile</li>
              <li>profile</li>
              <li>profile</li>
            </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

你可以将它们放在单独的divs中

除非你出于某种原因需要使用表格？

http://codepen.io/anon/pen/VeVjgL