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

我正在构建一个网站布局，我正在尝试创建一个图片列表，其中的描述集中在图片旁边，但我不知道如何让段落移动到图片旁边，而不让整个布局混乱。我把浮动、清除和显示设置弄得一团糟，但毫无用处。我添加了一张我想要的结果的图片

此部分的我的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>

---

对于每个p标记，只需添加一个clearfix类，并导入bootstrap或任何其他支持clearfix的框架，或按如下操作

.p:之前，
p:之后{
内容：“；
显示：表格；
}
p:之后{
明确：两者皆有；
}
p{
缩放：1；/*适用于IE 6/7（触发器布局）*/
}

在两个元素的父元素上尝试flex box：

显示器：flex

或尝试在段落上向右浮动：

.description p{float:right}

---

确保首先定义宽度。

参考此以更好地了解浮动和ClearFix。感谢您的支持。我认为确实如此，但运气不好。我贴了一张我的页面最终看起来像什么的图片。这很容易组织这样的问题。我知道引导网格系统，但如果可能的话，我正在尝试在没有它的情况下解决问题。让我来定义一下宽度，看看能不能解决这个问题。对不起，我不太明白你的意思。是不是有点像？

#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;
}