I have been searching around how to position this div, but everything goes wrong or nothing happens when I try, so I decided to ask here. Here is the css code of the divs:

我一直在寻找如何定位这个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;
    }

Here is how it looks like http://s27.postimg.org/vwchchcqb/dapls.png

这是它的样子http://s27.postimg.org/vwchchcqb/dapls.png

2 个解决方案

#1

First of all, welcome to Stack Overflow.

首先,欢迎使用Stack Overflow。

When asking a question, it is helpful too see all relevant code (and no irrelevant code) - so in your case, we would want the html you are working with. It's also really great to make a jsFiddle like THIS for us to see.

在提出问题时,查看所有相关代码(并且没有相关代码)也很有帮助 - 所以在您的情况下,我们会想要您正在使用的html。为我们制作像这样的jsFiddle也真的很棒。

It's hard to tell from your picture, but here is some code that might lead you to some cleaner practices. Good luck!

从你的图片中很难说清楚,但这里有一些代码可能会引导你进行一些更清洁的实践。祝好运!

@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 个解决方案

#1

html

CSS

更多相关文章

随机推荐