如何用較小的圖像和文字制作響應列表？

Question

我想以另一種方式使用此源構建此結構。 在該示例中，它使用<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;}

所以我有這個輸出。 （請原諒）

我想要的是當調整瀏覽器的大小時，文本將向下流動，但不在圖像的范圍或底部。 那我該怎么辦呢？

Answer 1

本質上，您使用的元素（img，標題和p）彼此堆疊作為塊級元素。 如果您先移動，則初始狀態已經看起來像您想要實現的目標。 如果您現在創建一個媒體查詢，並在某個斷點處添加您已經擁有的浮動樣式，那么您應該很好，恕我直言。

附帶說明一下，您應該嘗試只在每個側面設置一個h1，而不是每個列表項： https : //developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Heading_Elements

在這種特殊情況下，我寧願文章而不是列表項。

而且，如果您嘗試構建響應式解決方案，則通常應避免使用px，在您的示例中，它適用於屬性margin，padding和font-size。