这是我需要建立Mockup
现在我有了这个Site正如你所看到的，首先，内容顶部的两个图像只有半边框。
那么带有旁边图像的文本部分不在正确的位置。图像的上边界应该与旁边的文本在一行。我试了一些调整，但无济于事。
如何解决这两个问题?
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=&locale=de_DE&sdk=joey&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&height=290&header=true&show_faces=true&stream=false&width=262&href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FRW-Fliesen%2F115860578491339&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>
@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
删除图像周围的<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>
您的。foto1和。foto2类强制包装img的div的大小。去掉foto1 &foto2 .
除了上述的…尝试使用FireFox的FireBug插件或Google Chrome的web开发工具来诊断问题。我会系统地尝试关闭CSS样式，直到你得到你想要的结果。
对于两个图像周围的DIV，尝试调整margin-bottom和padding-bottom样式。
希望这对你有帮助。谢谢!
我相信你的问题的第二部分的答案可以通过改变文本结束标记的位置5div和插入换行符
来完成。我认为文本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 -->