html - 将 img 和 ul 列表对齐，使其彼此相邻

Question

我正在尝试为我的网站的移动 版本展示一个元素，我想要完成的是获得所列元素的图片，以及包含一些基本信息的元素符号列表像这样的元素...

ITEM TITLE
--------------
|            |  <bullet>Material  <bullet>Origin
|            |  material          origin
|   ITEM     |
|            |  <bullet>Other info header <bullet>Other info
|            |  description               description
--------------  

到目前为止，我的 HTML 代码是这样的:

<div class="items">
        <h1>All items</h1>
        <div class="item">
            <h2><u>Item Title</u></h2>
            <div class="left">
                <a href=""><img src="path/to/img" alt="item picture" width="120" height="190"></a>
            </div>

            <div class="right">
                <div class="item-details">
                    <ul>
                        <lh>Material</lh>
                        <li>Gold</li>
                    </ul>
                    <ul>
                        <lh>Origin</lh>
                        <li>USA</li>
                    </ul>
                    <ul>
                        <lh>Other info</lh>
                        <li>Hello</li>
                    </ul>
                    <ul>
                        <lh>Date manufactured</lh>
                        <li>400 B.C.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

它的 CSS 是:

.item {
    background-color: #EFEFEF;
}

.left{
    float: left;
    display: table-cell;
}

.right{
    float: right;
    display: table
}

.item-details ul {
    float: left;
    font-family: Verdana;
    background-color: #EFEFEF;
}

.item-details ul lh {
    font-weight: bold;
    font-size: 0.8em;
}

.itemn-details ul li {
    list-style: none;
    font-size: 0.7em;
}

但是，无序列表似乎太大或类似的东西，所以，html 跳过一些行并将其放在图片下面，这不是我想要的。

关于我将如何解决这个问题有什么想法吗？

Answer 1

使用 float 有点奇怪。我设法通过从“右”div 中删除 float 并给它“margin-left:auto;”来获得我认为你正在寻找的外观。这会将它推向右侧，但允许内部元素随着视口(viewport)缩小而堆叠。我认为发生这种情况是因为浏览器不再试图将整个 div float 到它旁边的元素的右侧。

希望这是您正在寻找的解决方案。