Html 如何显示带有图片的无序列表以及每个图片旁边的段落？

大家好，我有一个小问题，我试图做这个无序列表，我不能正确显示它

应该是这样的

代码如下：

<ul>
        <li><img src="images/02.jpg" alt="Picture 1"></li>
        <li><img src="images/19.jpg" alt="Picture 2"></li>
        <li><img src="images/02.jpg" alt="Picture 3"></li>
        <li><img src="images/19.jpg" alt="Picture 4"></li>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
    </ul>

Lorem ipsum dolor sit amet，是一位杰出的献身者。时辰万岁。在酒后驾车怀孕时，pulvinar justo non，告别了risus

Lorem ipsum dolor sit amet，是一位杰出的献身者。时辰万岁。在酒后驾车怀孕时，pulvinar justo non，告别了risus

Lorem ipsum dolor sit amet，是一位杰出的献身者。时辰万岁。在酒后驾车怀孕时，pulvinar justo non，告别了risus

Lorem ipsum dolor sit amet，是一位杰出的献身者。时辰万岁。在酒后驾车怀孕时，pulvinar justo non，告别了risus

这就是它的布局方式：如果这不是您想要的，请告诉我，我将对其进行编辑，使其符合您的需要

HTML:

<ul>
<li>
    <img src="images/02.jpg" alt="Picture 1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
</li>
<li>
    <img src="images/19.jpg" alt="Picture 2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
</li>
<li>
    <img src="images/02.jpg" alt="Picture 3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
</li>
<li>
    <img src="images/19.jpg" alt="Picture 4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus mauris vitae blandit dapibus. In at dui gravida, pulvinar justo non, adipiscing risus.</p>
</li>
</ul>

ul {list-style-type: none;}

li img {
    float: left;
    margin:5px;
}

---

如上所述，你们非常接近。你只需要记住你的

ul

中唯一能进入的东西是一个列表项（

li

）。不过，您可以在

li

中放置图像和段落

HTML

<div class="mycontainer">
    <ul id="mylist">
        <li>
            <img src="http://placehold.it/350x150" alt="placeholder"/>
            <p>Lorem ipsum dolor sit amet, reque error ceteros ex quo, pro ex saepe albucius. Ex pro libris apeirian, et salutandi deseruisse vim. Sea expetendis necessitatibus te, sea inani possit dissentias ea. Persius eleifend qui in. Mei dolore menandri te, in illud falli eirmod vis, est an aeterno interpretaris.</p>
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="placeholder"/>
            <p>Lorem ipsum dolor sit amet, reque error ceteros ex quo, pro ex saepe albucius. Ex pro libris apeirian, et salutandi deseruisse vim. Sea expetendis necessitatibus te, sea inani possit dissentias ea. Persius eleifend qui in. Mei dolore menandri te, in illud falli eirmod vis, est an aeterno interpretaris.</p>
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="placeholder"/>
            <p>Lorem ipsum dolor sit amet, reque error ceteros ex quo, pro ex saepe albucius. Ex pro libris apeirian, et salutandi deseruisse vim. Sea expetendis necessitatibus te, sea inani possit dissentias ea. Persius eleifend qui in. Mei dolore menandri te, in illud falli eirmod vis, est an aeterno interpretaris.</p>
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="placeholder"/>
            <p>Lorem ipsum dolor sit amet, reque error ceteros ex quo, pro ex saepe albucius. Ex pro libris apeirian, et salutandi deseruisse vim. Sea expetendis necessitatibus te, sea inani possit dissentias ea. Persius eleifend qui in. Mei dolore menandri te, in illud falli eirmod vis, est an aeterno interpretaris.</p>
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="placeholder"/>
            <p>Lorem ipsum dolor sit amet, reque error ceteros ex quo, pro ex saepe albucius. Ex pro libris apeirian, et salutandi deseruisse vim. Sea expetendis necessitatibus te, sea inani possit dissentias ea. Persius eleifend qui in. Mei dolore menandri te, in illud falli eirmod vis, est an aeterno interpretaris.</p>
        </li>
        <li>
            <img src="http://placehold.it/350x150" alt="placeholder"/>
            <p>Lorem ipsum dolor sit amet, reque error ceteros ex quo, pro ex saepe albucius. Ex pro libris apeirian, et salutandi deseruisse vim. Sea expetendis necessitatibus te, sea inani possit dissentias ea. Persius eleifend qui in. Mei dolore menandri te, in illud falli eirmod vis, est an aeterno interpretaris.</p>
        </li>
    </ul>
</div>

---

您的图像没有显示为“这就是它应该是什么样子”。您尝试过什么css？将

和

标记放在

内。看看这个-您需要将img向左浮动。我尝试过将图片向左浮动，但它们是一行中的两个，我需要。。

.mycontainer{
    width: 750px;
    margin: 0 auto;
}

#mylist li:before,
#mylist li:after {
    content: "";
    display: table;
} 
#mylist li:after {
    clear: both;
}
#mylist li {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

#mylist li{
    list-style: none;
    margin-bottom: 20px;
    overflow: none;
}

#mylist li p{
    width: 340px;
    float: left;
}

#mylist li img{
    width: 350px;
    float: left;
    margin-right: 20px;
}