个人中心
gpt4 book ai didi

html - 对齐 HTML 布局

转载 作者：行者123 更新时间：2023-11-27 22:32:59 25 4
gpt4 key购买 nike

我需要建立这个网站 Mockup

这是我现在拥有的Site

当您向下滚动到页面底部时，您会看到布局的高度不适合(底部仍然有一条黑线)。

我尝试了一些调整，但是Layout的高度还是不对。

如何解决？

这是我的代码:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>RW-Fliesen</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <a href="index.html" class="logo"     title="Logo"></a>
                <div class="contact-info" title="contact-    info"></div>
                <ul class="mn">
                    <li><a href=" " title="" class="mn1 "></a>        </li>
                    <li><a href=" " title="" class="mn2 "></a>    </li>
                    <li><a href=" " title="" class="mn3 "></a>    </li>
                    <li><a href=" " title="" class="mn4 "></a></li>
                    <li><a href=" " title="" class="mn5 "></a></li>
                    <li><a href=" " title="" class="mn6 "></a></li>
                </ul>
            </div>
            <div id="content">
                <div id="top">
                    <div class="foto1" title="Fliesen">     <img src="foto1.png" alt="Fliesen1"/> </div>
                    <div class="foto2" title="Fliesen">     <img src="foto2.png" alt="Fliesen2"/> </div>
                </div>
                <div id="leftcolumn">
                    <div class="text" title="text">
                        <p> RW-Fliesen <br />
                            Ludwig-Thoma-Str. 36 <br />
                            82008 Unterhaching 
                        </p>
                        <div class="text2"     title="text">
                            <p> Telefon: <br />
                                Fax: <br />
                                Mobil: <br     />
                                Email: <br />
                            </p>
                        </div>
                        <div class="text3"     title="text">
                            <p> 089 - 358 557     88 <br />
                                089 - 358 557 89 <br />
                                0179 - 673 77 41 <br />
                                info@rw-fliesen.com <br />
                            </p>
                        </div>
                        <div class="text4" title="text">
                            <p> Betriebsnummer: 7084943 <br />    <span class="text-blue"> Eingetragen in die Handwerksrolle bei <br /> der Handwerkskammer     für München <br /> und Oberbayern. </span>   </p>
                        </div>
                    </div>
                    <div class="face" title="face">
                        <iframe id="f580fdad4"     name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 690px; width: 262px;" class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?api_key=&amp;locale=de_DE&amp;sdk=joey&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Dfe1e61258%26origin%3Dhttp%253A%252F%252Fwww.rw-fliesen.com%252Ff21318bbdc%26domain%3Dwww.rw-fliesen.com%26relation%3Dparent.parent&amp;height=290&amp;header=true&amp;show_faces=true&amp;stream=false&amp;width=262&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FRW-Fliesen%2F115860578491339&amp;colorscheme=light"></iframe>
                    </div>
                </div>
                <div id="rightcolumn">
                    <div class="text5" title="text">
                        <p> Wir sind Ihr fachlich     kompetenter Fliesenleger- und Innenausbaubetrieb in Unterhaching.  </p>
                    </div>
                </div>
                <div id="footer">
                </div>
            </div>
        </div>
    </body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

body { background: #1c1b17 url(bg.jpg) repeat-x; margin: 0; padding: 0; height: 1000px;     font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;}

p {     color: #17142B; line-height: 18px;  padding: 0; font-size: 13px; font-    weight: 600; }
h3 { color: #003d7a; font-size: 10px; font-weight: 600; margin-top: 0px; padding: 0px;     }    
h4 { color: #2f303f; font-size: 13px; font-weight: 600; margin-top: 20px; padding: 0px;     }       

.text-blue {     color: #003d7a; line-height: 16px; padding: 0; font-size: 10px;     font-weight: 600; }


#wrapper { width: 1000px; height: 800px; margin: 0 auto; }
#header { height: 400px; width: 1000px; display: block; position: relative; }
#header .logo { position: absolute; width: 374px; height: 221px; display: block; float:         left; cursor: pointer; background: url(logo.png) 0 0 no-repeat transparent; top: 55px;     left: 10px; }
#header .contact-info { position: absolute; width: 293px; height: 133px; display:     block; float: left; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat     transparent; top: 100px; left: 700px; }

ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding:     0; list-style-type: none; }
ul.mn li { float: left; }
ul.mn li a { display: block; float: left; height: 73px; }
ul.mn li a.mn1 { width: 104px; background-image: url('mn1.png'); background-position: 0     0; }
ul.mn li a.mn2 { width: 212px; background-image: url('mn2.png'); }
ul.mn li a.mn3 { width: 142px; background-image: url('mn3.png'); }
ul.mn li a.mn4 { width: 128px; background-image: url('mn4.png'); }
ul.mn li a.mn5 { width: 117px; background-image: url('mn5.png'); }
ul.mn li a.mn6 { width: 147px; background-image: url('mn6.png'); }
ul.mn li a.active, ul.mn li a:hover { background-position: 0 73px; }

#content { height: 1000px; width: 1000px; display: block; position: relative; }

#top { height: 300px; width: 1000px; display: block; position: relative; margin-bottom:     100px; }
#top .foto1 { width: 452px; height: 139px; float: left; margin-top: 30px; }
#top .foto2 { width: 253px; height: 138px; float: left; margin-top: 30px; margin-left:     100px; }

#leftcolumn { height: 800px; width: 300px; display: block; position: relative; float:     left; }
#leftcolumn .text { height: 10px; width: 300px; display: block; position: relative;     margin-bottom: 90px; }
#leftcolumn .text2 { height: 10px; width: 50px; display: inline-block; position:     relative; }
#leftcolumn .text3 { height: 10px; width: 200px; display: inline-block; position:     relative;  padding-left: 30px; }
#leftcolumn .text4 { height: 10px; width: 300px; display: inline-block; position: relative; margin-top: 80px; }
#leftcolumn .face { height: 100px; width: 300px; display: block; position: relative; margin-top: 290px; }

#rightcolumn { height: 800px; width: 700px; display: inline-block; position: absolute;     margin-left: 350px; margin-top: 0px; float: right; }
#rightcolumn  .text5 { height: 300px; width: 700px; display: inline-block; position:     relative; }

#footer

最佳答案

您的页面中有一个带有 Facebook 信息的 iframe。此 iframe 延伸到页面底部，导致黑色背景可见。

您需要降低此 iframe 的高度。目前它是这样设置的(内联):

<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 690px; width: 262px;" class="fb_ltr" src="..."></iframe>

如果将高度更改为最大值 684px，黑条就会消失:

<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 684px; width: 262px;" class="fb_ltr" src="..."></iframe>

关于html - 对齐 HTML 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16221850/

25 4 0
文章推荐： c++ - 为什么在 C++ 中使用 Delete[] 会出现 Trace/Breakpoint 错误？
文章推荐： javascript - 创建跨模型和 Controller 使用的指令
文章推荐： layout - 为什么这个 div 在底部留一个边距
文章推荐： html - 如何保持标题固定并仍然滚动？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com