CSS

Question

我一直在寻找如何定位这个div，但是当我尝试时，一切都出错了或没有任何反应，所以我决定在这里问。这是div的css代码：

    #my_content{
    margin-bottom:0;
    background-image:url("bg.jpg");
    width:50%;
    float:left;
    padding:5px;
    color: white;
    font-size:30px;
    }  

    #info_menu{
    margin-left:;
    color: white;
    float:left;
    width:auto;
    margin-top:;
    margin-left:1%;
    padding-right:1%
    }    

    #spells{
    margin-left:5%;
    background-image:url("bg.jpg");
    position:absolute;
    margin-left:;
    width:65%;
    color:white;
    border:none;
    bottom:20;
    }

    #summary{
    background-image:url("bg.jpg");
    border:none;
    float:right;
    position:relative;
    width:30%;
    color:white;
    margin-right:0%;
    bottom:10;
    }

以下是http://s27.postimg.org/vwchchcqb/dapls.png

的样子

Answer 1

你知道块#spells {}中有语法错误，你输了

margin-left:;

您必须在冒号后指定边距

Answer 2

首先，欢迎使用Stack Overflow。

在提出问题时，查看所有相关代码（并且没有相关代码）也很有帮助 - 所以在您的情况下，我们希望您使用html。为我们制作像THIS这样的jsFiddle也真的很棒。

很难从你的照片中看出来，但这里有一些代码可能会引导你做一些更清洁的做法。祝你好运！

@sheriffderek

HTML

<header>
    header
</header>

<nav>
    <ul class='menu'>
        <li><a href='javascript:void(0)'>menu item</a></li>
        <li><a href='javascript:void(0)'>menu item</a></li>
        <li><a href='javascript:void(0)'>menu item</a></li>
        <li><a href='javascript:void(0)'>menu item</a></li>
    </ul>
</nav>

<div class="group">

    <section class='content'>
        content
    </section>

    <section class='spells'>
        spells
    </section>

</div> <!-- .group -->

<section class="summary">
    summary
</section>

CSS

* { /* look it up */
    box-sizing: border-box;
}

body {
    margin: 0;
}

header {
    width: 100%;
    float: left;
    background: orange;
}

nav {
    width: 100%;
    float: left;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    float: left;
}

.menu a {
    display: block;
    padding: 5px 10px;
}

.group {
    width: 65%;
    float: left;
}

.content, .spells {
    width: 100%;
    float: left;
    min-height: 10em;
}

.content {
    background: gray;
}

.spells {
    background: pink;
}

.summary {
    width: 35%;
    float: right;
    min-height: 20em;
    background: lightblue;
}

如何将这个div放在旁边？

2 个答案:

HTML

CSS