浮动子div宽度不影响父宽度

时间:2014-07-24 08:46:30

标签: html css css3

我有一个影响父div宽度的子div。

我希望子div不应该影响父div的宽度。

因为我使用了postion:绝对。但这会使页面本身成长。

这是我的fiddle

我希望子div不应该长出页面,同时它不应该增长父级的宽度

如果删除位置,则会发生here:绝对;

html -

<div class="htext">
Me
<div id="m_two">This is a test</div>
</div>

css -

.htext {
float:right;
background-color:#ccccff;
}
#m_two {
float:left;
width:200px;
position:absolute;
}

此致

2 个答案:

答案 0 :(得分:1)

更新您的CSS,如下所示。

.htext {
float:right;
background-color:#ccccff;
}
#m_two {
width:200px;
position:absolute;
right:0;
float:left;
}

DEMO

答案 1 :(得分:0)

FIDDLE

嗯,这里有一件事可以帮助你display:inline-block

CSS将遵循:

.htext {
    display:inline-block;   
    background-color:#ccccff;
    position:relative;
}
#m_two {
    float:left;
    width:500px;
    position:absolute;
    background:#F00;
}