Question

alt text 你好，

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

我创建了两个带有照片和联系人的列表（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个小时了，我似乎无法找到解决办法。也许解决方案真的很愚蠢，但我的大脑现在感觉像油炸了：p

Answer 1

您可以尝试以下方法，以尝试找出问题所在：

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

Answer 2

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

正在发生的事情是你正在将#rightlist从#leftlist下的默认位置移开。因为您使用的是position：relative而不是position：absolute，所以保留原始位置。您看到的额外空格是#rightlist默认显示的位置。

我不会在这个例子中使用位置。更好的选择是在两个列表中使用'float：left'。如果你这样做，你的css最终会对每个列表都一样 - 试试这个：

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

这可能会破坏#container div，它可以通过多种方式修复，最简单的方法是将“overflow：hidden; height：100％”添加到#container。如果需要，快速谷歌搜索应该提供更多选项。

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

希望这有助于您走上正轨。如果我不清楚，请发表评论，我会编辑我的回复！

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

2 个答案: