html - 格式化网页问题

Question

我是编码初学者，遇到 HTML/CSS 问题。该页面应该有两列宽度相同但高度不同的面板，但是当我尝试复制具有不同内容的页面时，间距未对齐。我想知道:是否可以编辑样式表以具有不同面板高度的正确格式？

这里有一些屏幕截图供引用:

Original Page

Duplicated Page

样式表

img {
    display:block;
}

#content2 {
    margin: 20px auto;
}

.article2 {
    background: #fff;
    height: 100%;
    margin: 0px auto 0;
    padding: 20px 0 40px;
}

#section2A {
    float: right;
    margin: 0;
    width: 500px;
    overflow: hidden;
}

#header2A {
    width: 90%;
    float: left;
    margin: 0px 0px 30px 50px;
    color:#333333;
}
#section3A {
    float: right;
    margin: 0;
    width: 500px;
    overflow: hidden;
}
#header3A {
    width: 90%;
    float: left;
    margin: 0px 0px 30px 50px;
    color:#333333;
}

#section4A {
    float: right;
    margin: 0;
    width: 500px;
    overflow: hidden;
}
#header4A {
    width: 90%;
    float: left;
    margin: 0px 0px 30px 50px;
    color:#333333;
}

#section5A {
    float: right;
    margin: 0;
    width: 500px;
    overflow: hidden;
}
#header5A {
    width: 90%;
    float: left;
    margin: 0px 0px 30px 50px;
    color:#333333;
}

#section2B {
    float: left;
    margin: 0;
    width: 500px;
    overflow: hidden;
}

#img2B {
}

#header2B {
    width: 90%;
    float: left;
    margin: 0px 0px 30px 50px;
}

#section3B {
    float: left;
    margin: 0;
    width: 500px;
    overflow: hidden;
}
#header3B {
    width: 90%;
    float: left;
    margin: 0px 0px 30px 50px;
    color: #333333;
}

#section4B {
    float: left;
    margin: 0;
    width: 500px;
    overflow: hidden;
}
#header4B {
    width: 90%;
    float: left;
    margin: 0px 0px 30px 50px;
    color:#333333;
}

#section5B {
    float: left;
    margin: 0;
    width: 500px;
    overflow: hidden;
}
#header5B {
    width: 90%;
    float: right;
    margin: 0px 0px 30px 50px;
    color: #333333;
}

页面示例

<!--- ROW 1 --->
        <div id="section2A">

<!--- Left image --->
        <img src="images/Cole, Teresa.jpg"
        width="500px"
        alt="Teresa Cole"/>

<!-- image attribution -->
            <article class="article2">
            <h2 id="header2A">Perfect, 2013<p>[Teresa Cole]</p></h2>
            <p>Influence comes in many forms and when much time is spent with someone their effect is often imperceptible until that presence is no longer here. 

Nothing provokes meditation like absence. 
</p>
            </article>
        </div> <!-- section2A -->

        <div id="section2B">

<!---Right image--->
        <img src="images/collier, aaron.JPG"
        width="500px" 
        alt="Aaron Collier"/>

<!-- image attribution -->                  

             <article class="article2">
                <h2 id="header2B">River Baptism, No. 1, 2004<p>[Aaron Collier]</p></h2><p>Sandy was one of my instructors during graduate school at Tulane, from 2003 until 2005. During this time, I was given the freedom to become enthralled with the formal and communicative possibilities of the painting medium. I began teaching as a Professor of Practice at Tulane starting in 2006, counting Sandy as an accomplished, generous mentor and close friend.</p>
            </article>
        </div> <!-- section2B -->

Answer 1

尝试检查您的图像是否有比预期更大的尺寸(保持在 2 列中)。

PS:实际上你似乎对复制页面的第一列有一个 margin-left 属性。将其更改为少 10px，它应该可以工作。