Question

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

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

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

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行。

谢谢！

无法正确定位我的div

0 个答案: