Question

这是我的代码：

.divUserRepCont
{
    position: absolute;

    top: 0;
    left: 105px;

    width: 195px;
    height: 25px;   
}

.divUserContCon
{
    width: auto;
    height: 100%;

    background-color: red;
}

.divUserCon
{
    width: 50px;
    height: 20px;
}

HTML：

<div class="divUserRepCont">
    <div class="divUserContCon">
        <div class="divUserCon">

        </div>
    </div>
</div>

我期待一个宽度为50px的红色条，但是自动宽度“divUserContCon”正在填满它的父div的整个195px。这是为什么？

修改

divUserContCon具有自动宽度的目的是因为：

divUserCon的大小将动态变化，并且它本身会有背景颜色。

divUserContCon将是divUserCon的容器，它本身将具有背景颜色和填充。

因此，如果divUserCon宽度为50px，背景为绿色，则divUserContCon将为50px宽（自动）+一些填充及其背景颜色。

Answer 1

width:50px;

需要放入divUserContCon。你不能依靠auto来占用任何子div的宽度。

Answer 2

试试这个

<style type="text/css">
.divUserRepCont {
  position: absolute;
  top: 0;
  left: 105px;
  width: 195px;
  height: 25px;   
}
.divUserContCon {
    width: auto;
    height: 25px;
}
.divUserCon {
    width: 50px;
    height: 25px;
    background-color: red;
}
</style>

如果您想要.divUserCon中的center，请在css中添加margin: 0 auto;。

Answer 3

这就是我解决它的方法：

.divUserRepCont
{
    position: absolute;

    top: 0;
    left: 105px;

    width: 195px;
    height: 25px;   

    background-color: orange;
}

.divUserContCon
{
    display: inline-block;

    height: 100%;

    padding-right: 20px;

    background-color: yellow;
}

.divUserCon
{
    display: inline-block;
    height: 20px;

    border-top: 5px solid rgb(62, 62, 62);

    background-color: red;
}

我将display：auto替换为display：inline-block;

CSS Div Of Width Auto Filling Whole Parent Div

3 个答案: