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

Question

你好，

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

我创建了两个包含照片和联系人的列表 (div)(在这张图片中，您可以看到左列表(我这样调用它)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 我把它们放在白色盒子里，你可以从我命名为 container 的照片中看到。容器的 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

是的，您这里的代码有几个问题，最显着的是您使用的 div 的数量(我假设那只是圆 Angular 的问题？)。但是我认为您的问题是由#leftlist 和#rightlist 的定位引起的。我看不出这些是 position:relative 的原因(同样在使用时你应该只设置最高值或最低值，而不是两者(例如'top:0px'或'bottom:0px')。)

发生的事情是您将#rightlist 从它在#leftlist 下的默认位置移动。因为您使用的是 position:relative 而不是 position:absolute 原始位置被保留。您看到的额外空白是 #rightlist 默认情况下应该出现的位置。

在这种情况下我不会使用位置。更好的替代方法是在两个列表上都使用“float:left”。如果你这样做，你的 css 最终对于每个列表都是相同的 - 试试这个:

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

这可能会使 #container div 崩溃，可以通过多种方式修复，最简单的方法是向 #container 添加“overflow:hidden;height:100%”。如果需要，快速谷歌搜索应该会提供更多选项。

另一种选择是使用“display:inline-block”而不是“float:left”，尽管这可能会在旧版浏览器中引起问题——这实际上取决于您需要支持的浏览器。

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