如何使图像保持在一定范围内同时浮动?

时间:2015-02-13 20:36:10

标签: html css html5 wordpress

我有一个(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>

问题是如果没有足够的文本,图像会在下一个程序的部分开始占用空间。这是一个截图:

screen capture of image alignment issue

您可以看到占位符图像未保留在HR上方并开始滑入下一个程序的细分。我该如何防止这种情况?

2 个答案:

答案 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)

就个人而言,我会使用ulli来完成工作。

<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才能正确设置样式。