我有一个(WordPress)页面,其中有一个不同程序的列表。左侧是程序的文本描述,右侧是图像。回到那一天,我会用一张桌子来实现这个目标:
<table>
<tr>
<td>Text goes here.</td>
<td><img src="myimage.jpg"></td>
<tr>
</table>
现在我正试图将它与表格对齐:
<p style="text-align: left">Text goes here.</p>
<img class="alignright size-medium wp-image-119" src="imageurl.jpg" width="300" height="199" />
<hr>
问题是如果没有足够的文本,图像会在下一个程序的部分开始占用空间。这是一个截图:
您可以看到占位符图像未保留在HR上方并开始滑入下一个程序的细分。我该如何防止这种情况?
答案 0 :(得分:2)
您仍然可以使用table
display
型号:
p {
display:table;
width:80%;
margin:auto;
}
p span {
display:table-cell;
vertical-align:top;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
<span><img src="http://lorempixel.com/300/199"/></span></p>
<hr/>
答案 1 :(得分:1)
就个人而言,我会使用ul
和li
来完成工作。
<ul id="program_list">
<li id="program_item" class="item01">
// HTML for program item goes here
</li>
<li id="program_item" class="item02">
// HTML for program item goes here
</li>
</ul>
然后你会使用一些CSS来设置ul
的宽度,并确保每个li
是全宽,而不是float
下一个项目,这个你也可以border-bottom:
分隔每个程序。
#program_list {
width: 600px;
}
#program_item {
width: 100%;
overflow: hidden;
float: none;
padding: 10px 0;
border-bottom: 1px solid #666;
}
假设您最初已经清除了CSS;如果没有,您可能需要添加更多CSS才能正确设置样式。