我是一名编程初学者，并有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

格式化网页问题

样式表

页样本

回答

相关问题