html - 描述 html 和 css 的格式

Question

我希望我的描述是这样的，我可以用边距、 float 和宽度来完成，但如果我这样做并调整分辨率大小，它将是一个困惑的布局。 那么您认为我还需要使用什么其他方法？

[IMG1 | description text  | [IMG2
 IMG1 | description text  |  IMG2
 IMG1 |  text text text   |  IMG2
IMG1] |     text text     |  IMG2]

HTML

<div class="headbapt">
    <img class="bapt" src="images/baptismal.jpg">Sacrament of Baptism is the first step in a lifelong journey of commitment and discipleship. Whether we are baptized as infants or adults, Baptism is the Church's way of celebrating and enacting the embrace of God.
    <img class="bapt2" src="images/baptismal.jpg">
</div>

CSS

.headbapt {
     text-align:center;
}
.baptdesc {
    width: 295px;
    margin-left: 40%;
}
.bapt {
    float: left;
    margin-left: 35%;
}
.bapt2 {
    float: right;
    margin-right: 32.5%;
    margin-top: -8.5%;
}

Answer 1

你为什么要使用 3 个 div。第一个和最后一个 div 给出左右浮动和中间 div float:left

        <div class="descr">
            <div class="leftimg">
                <img class="bapt2" src="images/baptismal.jpg">
             </div>
             <div class="text">

              </div>
             <div class="rightimg">
                <img class="bapt2" src="images/baptismal.jpg">
              </div>
        </div>