这就是我需要构建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>
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
答案 0 :(得分：0)
您的.foto1和.foto2类正在强制包装img的DIV的大小。从foto1＆amp;中取出高度风格foto2。
除了前面提到的...尝试使用FireFox的FireBug插件或Google Chrome的Web开发人员工具来诊断问题。我会系统地尝试关闭CSS样式，直到你得到你想要的结果。
对于围绕两个图像的DIV，尝试调整边距底部和填充底部样式。
希望能帮到你。谢谢！
答案 1 :(得分：0)
删除图像周围的<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>
答案 2 :(得分：0)
我相信你问题的第二部分的答案可以通过改变文本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 -->