描述html和css的格式

Question

我希望我的描述是这样的，我可以用margin，float和width来做，但如果我这样做并使分辨率调整大小，那将是一个混乱的布局。 那么您认为我还需要使用其他什么方法？

[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浮动：左

        <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>

Answer 2

为什么不使用桌子？出于某种目的，它们是HTML格式的（或者最后似乎是）你应该使用它们的情况！

<table>
    <tr>
        <td><img class="bapt" src="images/baptismal.jpg"></td>
        <td>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.</td>
        <td><img class="bapt2" src="images/baptismal.jpg"></td>
    </tr>
    <!-- and so on... -->
</table>

不再需要了。