0

好的，我有这样的 HTML 设置：

<div class="bullet">
    <div style="float: left; padding-right: 1em;">
        <img src="images/ofn_bullet.png" alt="OFN" style="max-width: 100%; border: none;" />
    </div>
    <div style="float: left;">
        Cooperative Business Assistance Corporation<br />Camden, NJ
    </div>
    <br class="clear" />
</div>

其中有很多，在此页面上列出： http ://opportunityfinance.net/Test/2013conf/index.html 他们一个接一个地列出，因为不幸的是我不知道该怎么做。有没有更简单的方法可以为每个联合主持人做到这一点？我已经尝试使用设置了<ul>标签的标签list-type-image，并为此设置<li>标签（这是我的第一次尝试），但我不知道如何在调整页面大小时调整图像大小，所以我放弃了那个尝试，并在上面进行了以下尝试。但我现在有其他问题。基本上，这两个div标签都有一个float: left应该可以工作的样式，但是如果你看下面的图片......在缩小它的大小时不能正常工作：

文本换行到下一行而不是停留在图像的右侧

老实说，我不知道该怎么做，也不想使用桌子。但如果可能的话，我确实需要对齐它旁边的文本，使其位于图像的中间。如果可能的话，就像 2 行应该在vertically aligned中一样middle vertical-align: middle。在任何情况下，我都需要文本始终保持在图像的右侧，即使浏览器缩小了！这是正在使用的CSS：

.clear
{
    clear: both;
}

div.bullet
{
    display: block;
    width: 100%;
    text-align: left;
}

我想知道 Co-Hosts 列是否有比我使用的更好的设置解决方案。请记住，页面需要缩小（文本和所有）以适应更小的屏幕分辨率和手机。也不能有水平滚动条。

4

2 回答 2

0

尝试删除float: left;（.bullet文本 div）

于 2013-03-28T00:36:18.263 回答
0

您可以将 cohosts 作为无序列表。然后，您可以将图像设置为每个列表项的背景图像。

<ul class='cohosts'>
    <li>The text</li>
    <li>The text</li>
</ul>

然后将css设置为这样的东西

.cohosts li {
    padding-left: 20px; /* Whatever the with of the image */
    background-image: url('images/ofn_bullet.png');
}
于 2013-03-28T00:50:16.543 回答