Question

我有一个带有类属性display: block; width: 100%;的父div。我无法改变这一点。

我试图在右侧浮动一个较小的div，但是，它总是出现在父div之下。我如何标记css？

.parent_div {
display: block;
width: 100%;
} 

.child_div {
 height: 51px;
 width: 51px;
 overflow: hidden;
 position: absolute;
 display: inline-block;

 }

<div class="parent_div"><div class="child_div">on right</div></div>

Answer 1

这应该有效：

    .parent_div {
    display: block;
    width: 100%;
    overflow:hidden;
    } 

   .child_div {
   height: 51px;
   width: 51px;
   overflow: hidden;
   float:right;
   }

Answer 2

这应该适合你：

.child_div {
 height: 51px;
 width: 51px;
 overflow: hidden;
 position: relative;
 display: inline-block;
float:right;
 }

这里是fiddle

Answer 3

试试这个CSS：

.parent_div {
    display: block;
    width: 100%;
    overflow:auto;
}
.child_div {
    height: 51px;
    width: 51px;
    display: inline-block;
    float:right;
}

<强> jsFiddle example

Answer 4

删除绝对位置并添加float：right;

.child_div {
 height: 51px;
 width: 51px;
 overflow: hidden;
 display: inline-block;
 float:right;
}

Answer 5

嗨，你的孩子div中有一个绝对位置，所以你可以正确使用：0

.child_div {
height: 51px;
width: 51px;
overflow: hidden;
position: absolute;
display: inline-block;

right:0px;
}

或者您可以删除您的位置并添加浮动：右侧

.child_div {
height: 51px;
width: 51px;
overflow: hidden;
display: inline-block;

float:right;
}

在另一个div的右侧浮动div

5 个答案: