0

我试图将 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>
4

2 回答 2

0

您的CSS 无效。您不能以数字开头类选择器。

于 2013-04-12T09:21:28.503 回答
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;
}

示例：http: //jsfiddle.net/Sj99w/

于 2013-04-12T09:22:49.783 回答