HTML/CSS 定位 A Image/Description 布局

Question

我正在构建一个网站布局，我正在尝试创建一个图片列表，其中的描述居中，但我不知道如何让段落在没有整个布局搞砸了。我弄乱了浮动、清除和显示设置，但无济于事。我添加了我想要的结果的图片

我的 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 class 并导入 bootstrap 或任何其他支持 clearfix 的框架或执行以下操作

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

Answer 2

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

display: flex;

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

.description p {float:right}

确保先定义宽度。

HTML/CSS 定位 A Image/Description 布局

HTML/CSS Positioning A Image/Description Layout

html

css

css-position