我如何修复表格中的文字位置?
尝试在视频旁边设置模糊线。
尝试将视频详情与右侧对齐。
Jsfiddle:https://jsfiddle.net/wewc4dq5/1/
<div class="row" style="margin-bottom: 5em">
<div class="col-sm-5">
<table class="left-photo-table">
<tr>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
</tr>
<tr>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
</tr>
</table>
</div>
<div class="col-sm-7" style="background-color: #D6E2FF; height: 310px;">
<table class="right-content-table">
<tr>
<h4 style="padding: 0.5em;">Patricia Bright</h4>
</tr>
<tr>
<td width="300px">
<iframe style="padding-left: 1em;" width="300" height="210" src="https://www.youtube.com/embed/XQxdQrPPHC4?rel=0&controls=1&showinfo=0"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</td>
<td>
<div style="width: 210px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rhoncus aliquam. Mauris imperdiet tortor non lectus volutpat, et vestibulum lorem viverra.</div>
</td>
</tr>
<tr width="100%">
<td style="text-align: right; padding-top: 0.5em;"><div style="width: 500px;"></div>21 min 17 sec | 632,991 views | ⭐⭐⭐⭐⭐</div></td>
</tr>
</table>
</div>
</div>
答案 0 :(得分:2)
您需要在display:block
标记上使用<tr>
并删除width:100%
代码上的<td>
。
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.left-photo-table {
height: 310px;
width: 100%;
text-align: center;
border-spacing: 1em;
border-collapse: separate;
vertical-align: middle;
}
.left-photo-table td {
background-repeat: no-repeat;
background-position: center;
width: 33%;
}
.left-photo-table td:hover {
cursor: pointer;
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;
}
&#13;
<div class="row" style="margin-bottom: 5em">
<div class="col-sm-5">
<table class="left-photo-table">
<tr>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
</tr>
<tr>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
<td style="background-image:url(https://mars.nasa.gov/people/images/profile/1x1/rfrancis-22826-profile-hi_F9C4E5F6-5645-4186-9A35995CDA924E4A.jpg)"></td>
</tr>
</table>
</div>
<div class="col-sm-7" style="background-color: #D6E2FF; height: 310px;">
<table class="right-content-table">
<tr>
<h4 style="padding: 0.5em;">Patricia Bright</h4>
</tr>
<tr style="display: block;"">
<td width="300px">
<iframe style="padding-left: 1em;" width="300" height="210" src="https://www.youtube.com/embed/XQxdQrPPHC4?rel=0&controls=1&showinfo=0"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</td>
<td>
<div style="width: 210px; margin-left: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rhoncus aliquam. Mauris imperdiet tortor non lectus volutpat, et vestibulum lorem viverra.</div>
</td>
</tr>
<tr width="100%">
<td style="text-align: right; padding-top: 0.5em;"><div style="width: 500px;"></div>21 min 17 sec | 632,991 views | ⭐⭐⭐⭐⭐</div></td>
</tr>
</table>
</div>
</div>
&#13;
可能这就是你想要的!!