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

漂浮物有点奇怪。我设法得到了我认为你正在寻找的外观，从“右”div中移除浮动，而是给它“margin-left：auto;”。这会将其向右推，但允许内部元素在视口缩小时堆叠。我认为这是因为浏览器不再试图将整个div浮动到它旁边的元素的右边。

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

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

1 个答案: