Html 当使用亲戚和花车时，div被弄乱了

我正在尝试移动两个

div

，其中图像位于

左div

旁边，但它们位于下方。我错过了什么

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;
}

---

你，盒子没有定位

尝试给出。框

位置：绝对和一个
top
值

像这样试试：

css:

HTML:


一,

二,

三,

一,

二,

三,

我不确定它是否对您有用

为#rand_v和#rand_p div（.left_容器）和.box div（.box_容器）添加容器
添加。盒分区顶部：0
为div创建规则
详情如下：

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

我在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>

我没有得到预期的输出。你能解释一下吗？你有什么问题吗？你能详细说明一下吗？我需要两个片子的图像都在左边的另外两个片子旁边。我真的不明白为什么这是否决票？我的问题怎么了？是的，就是这样。非常感谢。谢谢你的重播。我已经用@Kiran的解决方案做到了。
.left_container {
        float:left;
        width: 25%;
    }
    .box_container {
        position:relative;
    }

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

#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;

}