0

老实说 - CSS 和 Divs 不是我最熟悉的东西。然而，我以为我已经成功地为我以后的设计制作了模板，但事实证明，一切都对我来说有点移动......

在 Chrome 中，起初似乎一切正常，但刷新几次后，文本“您在页面上的位置”会跳到下一行。在 Firefox 中，事情只是在错误的地方开始。

如果可能的话，我还想点头，如何在位置文本之间以及每行之间获得填充/边距。现在添加它时，它只是将所有内容移动到完全错误的位置。

演示：http ://cityroast.dk

CSS：

section {
    width: 100%;
    height: 100%;
    background: #e8ebef;
    padding: 5px;
}
div#catcontainer {
    width: 10%;
    height: 100%;
    float: left;
}
div#categories {
    width: 100%;
    height: 100%;
    float: left;
}
div#ads {
    width: 100%;
    height: 100%
    float: left;
    display: box;
}
div#ads span {
    font-family: Verdana;
    font-size: 12;
    text-align: left;
}
div#one {
    width: 10%;
    height: 80px;
    float: left;
}
div#two {
    width: 70%;
    height: 80px;
    background: aqua;
    float: left;
    text-align: center;
}
div#three {
    width: 10%;
    height: 80px;
    background: red;
    float: left;
    text-align: right;
    line-height: 80px;
}
div a {
    text-decoration: none;
    color: #000000;
    font-family: Verdana;
    font-size: 12px;
}

HTML：

<section>
    <div id="catcontainer">
        <div id="categories">
            <ul>
                <b>A menu</b>
                <li><a href="">Something</a></li>
                <li><a href="">Something2</a></li>
                <li><a href="">Something3</a></li>
            </ul>
        </div>
    </div>
    <div id="ads">
        <span>Your position on page</span>
        <div id="one">A picture</div>
        <div id="two"><b>Title</b></div>
        <div id="three"><b>Details</b></div>
    </div>
</section>

显然，代码的后半部分此刻被回显了 5 次，得到 5 行。

已经谢谢了！

4

0 回答 0