我试图将 4 个 block 彼此相邻地放在同一行中，但我无法在代码中找到我的“错误”，所以如果有人知道为什么这不起作用......虽然在 Dreamweaver 中 float 显示正确，但是单击实时 View 时，它们只是一个放在另一个下面。我花了很多时间试图在这里找到答案，但我没有发现与我的问题类似的问题，因此我们将不胜感激。
代码如下: 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>
最佳答案
不允许以数字开头的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;
}
关于css - 为什么我的 CSS float 不能正常工作？ (宽度、高度和 float 在 CSS 中定义)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15967489/