Question

我希望以相反的方式使用此source来构建此结构。在该示例中，它使用<div>标记，在我的情况下，我使用<li>。我试图实现该源，但它没有奏效。所以我有这样的html结构：

  <div id="body-content-right">
                <ul id="body-content-items">
                    <li>
                        <img src="img/someimage.png" alt="Some text here "/>
                        <h1>Some text here Some text here Some text here </h1>
                        <p>Some text here Some text here Some text here Some text here </p>
                    </li>
                    <li>
                        <img src="img/someimage.png" alt="Some text here "/>
                        <h1>Some text here Some text here Some text here </h1>
                        <p>Some text here Some text here Some text here Some text here </p>
                    </li>
                    <li>
                        <img src="img/someimage.png" alt="Some text here "/>
                        <h1>Some text here Some text here Some text here </h1>
                        <p>Some text here Some text here Some text here Some text here </p>
                    </li>
                    <li>
                        <img src="img/someimage.png" alt="Some text here "/>
                        <h1>Some text here Some text here Some text here </h1>
                        <p>Some text here Some text here Some text here Some text here </p>
                    </li>

                </ul>
       </div><!--end body-content-right-->

我有这个CSS：

    #body-content-right { 
        width:49.2307692308%; 
        float:right;
        margin-top:130px;
    }
    #body-content-right ul li{
        float:left; width:47.9166666667%;
        padding-bottom: 20px; 
        border:solid 1px red;
    }
    #body-content-items h1 {
        font-size: 14px; 
        color: #0067a6; 
        -webkit-font-smoothing: antialiased !important; 
     }
    #body-content-items p { font-size: 13px;}

    #body-content-right ul li img{ float:left; padding-right:15px;}

所以我有这个输出。（原谅文字）

enter image description here

我想要的是当浏览器调整大小时，文本将向下流动但不在图像的范围或底部。那我该怎么办呢？

Answer 1

本身使用的元素（img，标题和p）作为块级元素相互堆叠。如果你先移动手机，那么你的初始状态看起来就像是你想要实现的目标。如果你现在创建一个媒体查询并在某个断点处添加你已经拥有的浮动样式应该是好的去imho。

在旁注中，您应该尝试只有一个h1而不是每个列表项：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

在语义上，我更喜欢那个特定情况下列表项的文章。

如果你尝试构建一个响应式解决方案，你应该尽量避免使用px，在你的例子中它适用于属性margin，padding和font-size。

如何使用小图像和文本制作响应列表？

1 个答案: