我试图将4个块放在彼此相邻的行中，我无法在代码中找到我的“错误”，所以如果有人知道为什么这不起作用...虽然在Dreamweaver中浮动显示正确，但是单击实时视图时，它们只会落在另一个之下。我花了很多时间试图找到答案，但我没有找到类似的问题，所以任何帮助都会受到赞赏。
这是代码： 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>
答案 0 :(得分：0)
你的CSS in invalid。您无法使用数字启动类选择器。
答案 1 :(得分：0)
不允许以数字开头的Css类名，您必须重命名它。简单地将其重命名为.c1 .c2等，它将起作用。
HTML
<div id="stebr">
<div class="c1">
<div class="pic"></div>
<div class="naslov">
<h1>Who are they?</h1>
</div>
<div class="tekst">
<p>Hello world</p>
</div>
</div>
<div class="c2">
<div class="pic2"></div>
<div class="naslov">
<h1>What they do</h1>
</div>
<div class="tekst">
<p>Hello world</p>
</div>
</div>
<div class="c3"></div>
<div class="c4">
<div class="pic3"></div>
<div class="naslov">
<h1>Where are we</h1>
</div>
<div class="tekst">
<p>Hello world</p>
</div>
</div>
</div>
<强> CSS
#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 .c1 {
width: 195px;
height: 290px;
float:left;
}
#stebr .c2 {
width: 195px;
height: 290px;
float: left;
}
#stebr .c3 {
width: 195px;
height: 290px;
float: right;
}
#stebr .c4 {
width: 195px;
height: 290px;
float: right;
}