html - HTML 布局定位和图像边框

Question

现在我有这个网站

正如您首先看到的，内容顶部的两个图像只有一半边框。

然后带有旁边图像的文本部分不在正确的位置。并且图像的上边框应与旁边的文本在一行中。我尝试了一些调整，但没有任何帮助。

可以做些什么来解决这两个问题？

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: 684px; 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><br />

                        <p> Als Fachbetrieb mit langjähriger Erfahrung in Fliesenverlegung und Innenausbau bieten wir Ihnen hohe handwerkliche Qualität, wertvolle Materialien sowie faire Preise. </p><br />

                        <p> Unsere Leistungen: </p>
                        <ul>
                        <li> Beratung & Verlegung von     Fliesen, Platten, Naturstein und Mosaik vom Fachmann </li>
                        <li> Individuelle und exclusive Bad- und Wohnraumgestaltung </li>
                        <li> Vermittlung von Handwerksmeisterbetrieben ( Installlateur, Elektriker, Maurer, Maler, Schreiner, Bodenleger) </li>
                        <li> Trockenbau </li>
                        <li> Estrichverlegung </li>
                        <li> Innenausbau </li>
                        <li> Reparaturarbeiten </li>
                        <li> Entrümpelung </li>
                        <li> Zusammenstellen eines Teams zur Kompletten Renovierung & Bauaufsicht </li>
                        </ul>
                        </div>

                        <img src="img1.png" alt="img"     class="img1" />
                        <p> Sie möchten Renovieren, Ihre Wohnräume neu und exclusiv gestalten?

                            Ob groß, oder klein spielt hier keine Rolle, selbst aus einem 5m² Bad kann man einen echten "Eyecatcher" machen!

                            Gerne erstellen wir Ihnen ein individuelles Angebot zu Ihrem Bauvorhaben, beraten Sie zu verschiedenen Möglichkeiten der Durchführung und Gestaltung, sowie neuen Produkten und Materialien in der Baubranche.
                            Erfahren Sie mehr über unser Leistungsspektrum auf den folgenden Seiten. </p>

                </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: auto;     font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;}

ul, p { color: #373b3f; line-height: 18px; 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; }
.img1 { float: left; margin: 0 20px 10px 0; padding: 0; border: #FFF 3px solid; }   


#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; border: 3px solid #FFF; }
#top .foto2 { width: 253px; height: 138px; float: left; margin-top: 30px; margin-left:     100px; border:#FFF 3px solid; }

#leftcolumn { height: 800px; width: 300px; display: block; position: relative; float: left; }
#leftcolumn .text { height: 10px; width: 300px; display: block; position: relative;     margin-bottom: 0px; }
#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: 310px; margin-top: 0px; float: right; }
#rightcolumn  .text5 { height: 300px; width: 700px; display: inline-block; position: relative; }

#footer

score 0 · Accepted Answer

我相信可以通过更改文本 5 div 的结束标记的位置并
在需要的位置插入换行符来回答问题的第二部分。我认为文本 5 div 部分应如下所示：

<div class="text5" title="text">

                        <p> Wir sind Ihr fachlich     kompetenter Fliesenleger- und Innenausbaubetrieb in Unterhaching.  </p><br />

                        <p> Als Fachbetrieb mit langjähriger Erfahrung in Fliesenverlegung und Innenausbau bieten wir Ihnen hohe handwerkliche Qualität, wertvolle Materialien sowie faire Preise. </p><br />

                        <p> Unsere Leistungen: </p>
                        <ul>
                            <li> Beratung & Verlegung von     Fliesen, Platten, Naturstein und Mosaik vom Fachmann </li>
                            <li> Individuelle und exclusive Bad- und Wohnraumgestaltung </li>
                            <li> Vermittlung von Handwerksmeisterbetrieben ( Installlateur, Elektriker, Maurer, Maler, Schreiner, Bodenleger) </li>
                            <li> Trockenbau </li>
                            <li> Estrichverlegung </li>
                            <li> Innenausbau </li>
                            <li> Reparaturarbeiten </li>
                            <li> Entrümpelung </li>
                            <li> Zusammenstellen eines Teams zur Kompletten Renovierung & Bauaufsicht </li>
                        </ul>
                   <!-- </div> this is where you inserted your ending tag in the HTML code you provided-->

                    <img src="img1.png" alt="img"     class="img1" />
                    <p> Sie möchten Renovieren, Ihre Wohnräume neu und exclusiv gestalten?<br/><br/>

                        Ob groß, oder klein spielt hier keine Rolle, selbst aus einem 5m² Bad kann man einen echten "Eyecatcher" machen!<br/><br/><br/>

                        Gerne erstellen wir Ihnen ein individuelles Angebot zu Ihrem Bauvorhaben, beraten Sie zu verschiedenen Möglichkeiten der Durchführung und Gestaltung, sowie neuen Produkten und Materialien in der Baubranche.
                        Erfahren Sie mehr über unser Leistungsspektrum auf den folgenden Seiten. </p>
                     </div> <!-- This is where I believe you should end text 5 div -->

score 0 · Accepted Answer

删除<div>图像周围的标签，然后将 div 的样式应用于图像本身。省略宽度和高度，您将拥有一切按您希望的方式工作。这是一个代码示例，可以为您提供想法，最终记住尝试将尽可能多的样式移到<style>标签或 css 文件中。

<div id="top">
    <img src="foto1.png" alt="Fliesen1" style="float: left; margin-top: 30px; border: 3px solid #FFF;"/>
    <img src="foto2.png" alt="Fliesen2" style="float: left; margin-top: 30px; border: 3px solid #FFF; margin-left: 100px;" />
</div>

score 0 · Accepted Answer

您的 .foto1 和 .foto2 类正在强制包装 img 的 DIV 的大小。只需取消 foto1 和 foto2 的高度样式即可。

除了上述...尝试使用 FireFox 的 FireBug 插件或 Google Chrome 的 Web 开发人员工具来诊断问题。我会系统地尝试关闭 CSS 样式，直到获得所需的结果。

对于两个图像周围的 DIV，尝试调整 margin-bottom 和 padding-bottom 样式。

希望对您有所帮助。谢谢！

html - HTML 布局定位和图像边框

3 回答 3

Related

Reference