我试图将 4 个块彼此相邻放在同一行中,但我无法在代码中找到我的“错误”,所以如果有人知道为什么这不起作用......虽然在 Dreamweaver 中浮动显示正确,但是当单击 Live看来,它们只是一个低于另一个。我花了很长时间试图在这里找到答案,但我没有发现与我类似的问题,所以任何帮助将不胜感激。
这是代码:CSS:
<style>
#stebr {width: 890px; height: 300px;margin-top: 50px;}
#stebr .pic { width: 195px; height: 150px; background:url(img/s1.png) no-repeat; }
#stebr .pic2 { width: 195px; height: 150px; background:url(img/s2.png) no-repeat; }
#stebr .pic3{ width: 195px; height: 150px; background:url(img/s3.png) no-repeat; }
#stebr .naslov h1 { width:195px; height: 25px; font-family: Tahoma, Geneva, sans-serif; font-size: 17px; color:#ff4e00; margin-top:15px; background-image:url(img/line.png); background-position:bottom; background-repeat:no-repeat; }
#stebr .tekst p { width:195px; height: 80px; font-family:Tahoma, Geneva, sans-serif; font-size: 14px; color:#CCC; }
#stebr .1 {width: 195px; height: 290px; float:left; }
#stebr .2 {width: 195px; height: 290px; float: left;}
#stebr .3 {width: 195px; height: 290px; float: right; }
#stebr .4 {width: 195px; height: 290px; float: right; }
</style>
HTML:
<body>
<div id="stebr">
<div class="1">
<div class="pic"></div>
<div class="naslov"><h1>Who are they?</h1></div>
<div class="tekst"><p>Hello world</p></div>
</div>
<div class="2">
<div class="pic2"></div>
<div class="naslov"><h1>What they do</h1></div>
<div class="tekst"><p>Hello world</p></div>
</div>
<div class="3">
</div>
<div class="4"><div class="pic3"></div>
<div class="naslov"><h1>Where are we</h1></div>
<div class="tekst"><p>Hello world</p></div>
</div>
</div>
</body>