hbox1

Question

#container
{
    height:100%;
    width:100%;
    border:5px solid red;
    margin:0px;
}
#hbox1
{
    position:absolute
    left:5px;
    top:5px;
    height:130px;
    width:150px;
    border:5px solid red;
    margin:5px;
}
#hbox2
{
    position:absolute
    left:150px;
    top:5px;
    height:130px;
    width:150px;
    border:5px solid red;
    margin:5px;
}

我需要在hbox1的右下方添加hbox2，但它显示在hbox1的底部...我试图使用绝对定位来定位hbox2 ......但它不起作用......

Answer 1

使用内联块也是我的建议。但是不要忘记在容器div上设置font-size：0来摆脱任何奇怪的空间。

此外，由于你将使用内联块，你不需要再设置TOP和LEFT使hbox1和hbox2相同，在这种情况下你应该使用一个类而不是两个id

看看吧！我建议玩下面链接中的值（当您进行更改以查看差异时点击RUN）以了解有关所有内容的更多信息。

http://jsfiddle.net/d7c5g/4/

#container{
height:100%;
width:100%;
border:5px solid red;
margin:0px;
font-size:0px;
}
.hbox{
 display:inline-block;
 height:130px;
 width:150px;
 border:5px solid red;
 margin:5px;
}


<div id="container">
    <div class="hbox"></div>
    <div class="hbox"></div>
</div>

Answer 2

每个position: absolute后您都缺少分号。

除非您因特定原因需要使用position：absolute，否则最好在每个框中使用float: left或display: inline-block，并将元素保留在正常文档流中。< / p>

Answer 3

使用浮动：）

hbox1

{
 float:left
 left:5px;
 top:5px;
 height:130px;
 width:150px;
 border:5px solid red;
 margin:5px;
}
#hbox2
{
 float:left;
 left:150px;
 top:5px;
 height:130px;
 width:150px;
 border:5px solid red;
 margin:5px;
}

Answer 4

使用显示：内联块;

有助于为您的网站和代码保持更加一致和干净的外观。如果您正在进行响应式设计，浮动实际上可以使您的工作更加困难。

将元素定位在指定像素的页面上的css中

4 个答案:

hbox1