<分区>
html - 使用 materializecss 将图像与相应的表对齐
在这里找到完整的代码: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>
最佳答案
看起来您正在使用 Materialize CSS 框架。我会放弃表格布局方法并使用 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>关于html - 使用 materializecss 将图像与相应的表对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35275002/