HTML/CSS 定位图像/描述布局

Question

我正在构建一个网站布局，我试图获得一个图像列表，其描述集中在它们旁边，但我不知道如何在没有整个布局的情况下让段落移动到图像旁边搞乱。我已经搞乱了 float 、清除和显示设置，但无济于事。我添加了一张我想要的结果的图片

此部分的 HTML 目前如下所示:

 <section>
    <ul id="gallery">
        <li>
            <a href="GPA_Calc_Screen.png">
                <img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
            </a>
        </li>
        <li>
            <p >
                    This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
            </p>

        </li>

        <li>
                <a href="Avengers_App_Screen.png">
                    <img src="Avengers_App_Screen.png" alt"">
                </a>
        </li>
        <li>
                <p>
                    Okay, who doesn't like The Avenegrs movie series? Huh? Well, yeah I guess you're right, but it doesn't matter because I love it! I made this app to
                    test out layout design, android intents, and a few other features. It's also
                    a great way to kill 4 minutes.
                </p>
        </li>

    </ul>
  </section>

我的CSS目前看起来像这样:

#gallery {
    margin: 0;
    padding: 0;
    list-style: none; /*Removes bullet points*/
}

#gallery li {

    width: 45%;
    margin: 2.5%;
    background-color: #b3dbeb
    color: #1d95c5;
}


.descriptions {
    display: block;
}

.descriptions a {
    float: left;
}

Answer 1

对于每个 p 标签，只需添加一个 clearfix 类并导入 bootstrap 或任何其他具有clearfix 支持的框架，或者执行以下操作

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