-2

这就是我需要构建的：样机

此刻我停留在侧边栏。我需要对齐电话号码的联系信息，以便它们垂直对齐。

在这里，您可以看到我所知道的，文字与电话号码的高度不一致：Site Link

CSS：

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

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

p {
color: #22222b;
line-height: 16px;
padding: 0;
font-size: 12px;
font-weight: 600;
}

#wrapper { width: 1000px; 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: 1100px; width: 1000px; display: block; position: relative; }

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


#leftcolumn { height: 200px; width: 300px; display: block; position: relative; }
#leftcolumn .text { height: 10px; width: 300px; display: block; position: relative;     margin-bottom: 200px; }
#leftcolumn .text2 { height: 10px; width: 50px; display: block; position: relative; }
#leftcolumn .text3 { height: 10px; width: 130px; display: block; position: relative;      padding-left: 80px; }
#leftcolumn .face { height: 300px; width: 300px; display: block; position: relative; }

#rightcolumn

#footer

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 />
                        </p>
                    </div>
                    <div class="text3" title="text">
                        <p>089 - 358 557 88
                            <br />089 - 358 557 89
                            <br />0179 - 673 77 41
                            <br />
                        </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>
            <div id="footer"></div>
        </div>
    </div>
</body>
</html>

我们该如何解决？

4

4 回答 4

0

display: inline-block;与text2和text3类一起使用。

#leftcolumn .text2 {
height: 10px;
width: 50px;
display: inline-block;
position: relative;
}

#leftcolumn .text3 {
height: 10px;
width: 130px;
display: inline-block;
position: relative;
padding-left: 80px;
}
于 2013-04-24T15:11:22.800 回答
0

在 #leftcolumn .text3 添加此样式规则：

top:-22px;
于 2013-04-24T15:13:40.953 回答
0

您可以像这样修改该块 HTML：

<style type="text/css">
.title{ display:inline-block; width:80px; }
</style>

<p><span class="title">Telefon</span> 089 - 358 557 88</p>
<p><span class="title">Fax</span> 089 - 358 557 88</p>
<p><span class="title">Mobil</span> 0179 - 673 77 41</p>
于 2013-04-24T15:14:50.973 回答
0

通过将 display:block 更改为 display:inline-block 来修复显示 css。这应该可以解决您的问题。

于 2013-04-24T15:23:28.700 回答