Question

我正在尝试使用divs旁边的图像移动两个left divs，但它们位于它们之下。我在这里错过了什么？

CSS

#main {
    margin: 0 auto;
}
#header {
    clear:both;
    float:left;
    width:100%;

}
#header {
    border-bottom:1px solid #ccc;

}
.clear {
    clear: both;    
}

#header p, #header h1, #header h2 {
    padding:.4em 15px 0 15px;
    margin:0;
}
#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 2px 0;
    padding:0;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-align:center;
    background:#eee;
    color:#000;
    text-decoration:none;
    position:relative;
    left:15px;
    line-height:1.3em;
}
#header ul li a:hover {
    background:#369;
    color:#fff;
}
#header ul li a.active, #header ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}
#rand_v{
    margin-top: 5px;
    width: 130px;
    padding:1em;
    height:auto;
    position:relative;
    z-index:2;
    border:1px solid #bcbcbc;
}
#rand_p{
    margin-top: 10px;
    width: 130px;
    padding:1em;
    height:auto;
    position:relative;
    z-index:2;
    border:1px solid #bcbcbc
}
.box {
    display:inline-block;
    position: relative;
    margin: 1%;
    float:right;
    min-width:30%;
    height:242px;
    border:2px solid #ccc;
    background-color: #f0f0f0;

}
.littlebox {
    border: 1px solid #d3d3d3;
    margin:10px;
    width: 75px;
    height: 75px;
    padding: 5px;

}
table{
    width:555px;
}

Answer 1

你.box没有定位

尝试提供.box position: absolute;和top值

http://jsfiddle.net/g0tfg5x7/

Answer 2

尝试这样： Demo

的CSS：

.fl {
    float:left;
}

HTML：

 <div class="fl">
        <div id="rand_v">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
        <div id="rand_p">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>

Answer 3

我不确定它对你有用。

为#rand_v和#rand_p divs（.left_container）和.box div（.box_container）添加容器
添加.box div top：0;
为div创建规则

如下：

.left_container {
        float:left;
        width: 25%;
    }
    .box_container {
        position:relative;
    }

Fiddle is here

Answer 4

我对 html

进行了一些更改

<div id="side">
    <div id="rand_v">
       <p>1</p>
       <p>2</p>
       <p>3</p>
    </div>
    <div id="rand_p">
       <p>1</p>
       <p>2</p>
       <p>3</p>
    </div>
</div>

并将 css 设为

#side
{
  width: 175px;
    float:left;
}

.box {
    display:inline-block;
    position: relative;
    margin: 1%;
    float:left;             // changed
    min-width:30%;
    height:242px;
    border:2px solid #ccc;
    background-color: #f0f0f0;

}

DEMO

当使用亲戚和花车时，Div被搞砸了

4 个答案: