我是一名編程初學者，並有HTML/CSS問題。頁面應該有兩列寬度相同但高度不同的面板，但是當我嘗試使用不同內容複製頁面時，間距未對齊。我想知道：是否可以編輯樣式表以使用不同的面板高度進行正確的格式化？格式化網頁問題

下面是一些屏幕截圖以供參考：

樣式表

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

來源

2016-03-02 Michael Hammer

試着檢查一下，看看你的圖片是否有更大的尺寸（保留在2列中）。

PS：實際上你似乎有一個margin-left屬性重複頁面的第一列。改變10px以下，它shoudl工作。

來源

2016-03-10 12:16:00 smobx

格式化網頁問題

樣式表

頁樣本

回答

相關問題