网页的结构。巨大的差距。 HTML或CSS问题？

Question

您好，

我想构建一个网页，我有以下问题。我试图上传一张照片，但我不能，因为我没有足够的选票。我有一个联系人页面，我的问题是联系人（与人物的小照片）和底部的灰色图层之间存在巨大差距（请投我一票，以便我可以上传照片以展示我的意思） 。我很困惑，我不知道问题出在哪里。在这里我给一些信息：

我已经创建了两个列表（div）的照片和联系人（在这张图片中，你可以看到左侧列表的2张照片（我称之为）div和右侧列表div的一张照片

这两个的CSS如下：

#leftlist { 
width:430px; 
position: relative; 
left: 0px; 
top: 0px; 
bottom: 720px;} 

#rightlist { 
width:430px; 
position: relative; 
left: 450px; 
bottom: 720px; 
top: -670px;} 

这两个div我把他们的白框里面，你可以从我命名容器中的照片上看到的容器中的CSS是：

.container { 
width:950px; 
margin-top: 0; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto;} 

这里我想补充容器的整个代码，包括什么内：

<div class="container"> 
     <div class="box"> 
      <div class="border-top"> 
       <div class="border-right"> 
        <div class="border-bot"> 
        <div class="border-left"> 
         <div class="left-top-corner"> 
          <div class="right-top-corner"> 
           <div class="right-bot-corner"> 
           <div class="left-bot-corner"> 
            <div class="inner"> 
             <h2>&nbsp;</h2> 
            <h2 align="center">Sales and Customer Service Team</h2> 
             <h2 align="center"><br /> 
             <br /> 
             </h2> 

            <div id="leftlist"> 
            <ul class="list2"> 
              <li> 
              <img alt="" src="images/blabla.jpg" /> 
              <h4><strong>blabla </strong> 
              President<br /> 
              <br /> 
              <span class="style100">Email: <a href="mailto:blabla@blabla.it">blabla@sblabla.it</a></span><br /> 
             <span class="style100">Tel: +39 02 00000001</span><br /> 
             </h4></li> 
              <li></li> 
              <br /> 


              <li> 
              <img alt="" src="images/blabla.jpg" /> 
              <h4><strong>blabla </strong> 
              General Sales Manager<br /> 
              <br /> 
<span class="style100">Email: <a href="mailto:blabla@blabla.it">blabla@blabla.it</a></span><br /> 
               <span class="style100">Tel: +39 02 00000023</span><br /> 
             </h4> 
             </li> 
             <li></li> 
              <br /> 


              <li> 
              <img alt="" src="images/blabla.jpg" /> 
              <h4><strong>blabla </strong> 
            Sales Manager<br /> 
            <br /> 
            <span class="style100">Email: <a href="mailto:blabla@sblabla.it">blabla@sblabla.it</a></span><br /> 
            Tel: +39 02 00000021<br /> 
             </h4></li> 
              <li></li> 
              <br /> 


              <li> 
              <img alt="" src="images/lara.jpg" /> 
              <h4><strong>Lara blabla</strong> 
              Sales and Logistics<br /> 
              <br /> 
              <span class="style100">Email: <a href="mailto:larablabla@blabla.it">lara.blabla@blabla.it</a></span><br /> 
              Tel: +39 02 00000022<br /> 
             </h4></li> 
              <li></li> 
              <br /> 
           </ul> 
            </div> 
             <div id="rightlist"> 
             <ul class="list2">  
             <li> 
              <img alt="" src="images/blabla.jpg" /> 
              <h4><strong>blabla</strong> 
              Laboratory Manager and Quality Control<br /> 
              <br /> 
              <span class="style100">Email: <a href="mailto:blabla@blabla.it">blabla@blabla</a></span><br /> 
              Tel: +39 02 00000020<br /> 
             </h4></li> 
              <li></li> 
              <br /> 


            <li> 
              <img alt="" src="images/blabla.jpg" /> 
              <h4><strong>blabla</strong>Technical Department<br /> 
               <br /> 
               <span class="style100">Email: <a href="mailto:blabla@blabla.it">blabla@blabla.it</a></span><br /> 
               Tel: +39 02 00000012<br /> 
             </h4></li> 
              <li></li> 
              <br /> 

            <li> 
              <img alt="" src="images/blabla.jpg" /> 
              <h4><strong>blabla</strong>Safety Manager<br /> 
               <br /> 
               <span class="style100">Email: <a href="mailto:blabla@blabla.it">blabla@blabla.it</a></span><br /> 
               Tel: +39 02 00000011<br /> 
             </h4></li> 
            <li></li> 
             </ul> 
            </div> 
            </div> 
            <div align="center"></div> 

           </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
      </div> 
    </div> 
     <!-- box end --> 
    </div> 

提示：有更多的照片和联系方式不在照片可见我上传，我想告诉你的之间的差距容器div和下一个div（灰色图层）。

我真的很抱歉，如果我问一些愚蠢的事情，但我一直在为此工作8小时，而我似乎无法找到解决方案。也许解决方案是非常愚蠢的，但我的大脑感觉像它现在油炸：对

Answer 1

对，您在这里的代码有几个问题，最值得注意的是您使用的div的数量（我认为这只是圆角？）。不过，我相信你的问题是由#leftlist和#rightlist的定位引起的。我无法看到这些位置的原因：相对（也可以在使用时只应设置顶部值或底部值，而不是两者（例如'top：0px'或'bottom：0px'）。）

发生了什么是您正在将#rightlist从#leftlist下的默认位置移动。因为您使用的是position：relative和not position：绝对原始位置被保留。您看到的额外空格是默认情况下#rightlist应该出现的位置。

我不会在这种情况下使用职位。更好的选择是在两个列表上使用'float：left'。如果你这样做你的CSS将最终成为每个列表是相同的 - 试试这个：

#leftlist 
#rightlist { 
    width:430px; 
    float:left; 
    } 

这可能倒塌的#container的DIV可固定在许多方面，其中最简单的添加“溢出：隐藏;身高：100％“到#container。如果需要，快速谷歌搜索应该提供更多的选项。

另一种选择是使用'display：inline-block'而不是'float：left'，尽管这可能会导致旧版浏览器出现问题 - 这取决于您需要支持哪些浏览器。

希望这有助于你走上正确的轨道。如果我不清楚，请留下评论，我会编辑我的回复！

Answer 2

你可以尝试以下列试图找出问题所在：

安装Web Developer插件在Firefox中，加载你的页面，然后使用“大纲块级别元素”选项来显示组成页面的所有元素。