为什么这个小孩div不包含在父div的蓝色背景中？

下面是代码：为什么这个小孩div不包含在父div的蓝色背景中？

.wrapper { 
 
    overflow: auto; 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: #f00; 
 
} 
 

 
.t0 { 
 
    height: 100px; 
 
    background-color: #00f; 
 
} 
 

 
.t0 .s1 { 
 
    font-size: 30px; 
 
    color: #fff; 
 
}

<div class="wrapper"> 
 
    <div class="t0"> 
 
    <div class="s1">aaaaaaaaaaaaaaaaaaaaaabbbbbaaaaaabbba</div> 
 
    </div> 
 
</div>

我想包含在div.t0的蓝色背景div.s1。

我发现div.s1和div.t0都是300px的宽度非常混乱的事实。

我在查找有关如何在css spec中确定宽度的相关规范，但失败了。

问题：

如何才能使所含div.t0的蓝色背景div.s1
哪里这种行为的相关规范？

更新：谢谢你的提示答案！我想补充一点，我不想包装长文本。我很困惑为什么div.s1和div.t0 300px的宽度，而不是像500 + px

来源

2016-07-28 zjk

你是指div.s1？我找不到div类's0' –

你在CSS中的'div.s0'在哪里？ –

@SyamPillai是的，修正 – zjk

如果你想整个词的背景是蓝色的，

尝试this
（添加display: inline-block;到t0）

注：这让你的div内联（你将不得不添加换行符<之后让他们像之前那样定位）

来源

2016-07-28 06:22:25

看来，使's1'行内块不起作用。 – zjk

对不起。尝试时测试过宽度'width：'x'px'。将删除它 –

问题不明确。希望您正在寻找这种解决方案

.wrapper { 
 
    overflow: auto; 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: #f00; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.t0 { 
 
    height: 100px; 
 
    background-color: #00f; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.t0 .s1 { 
 
    font-size: 30px; 
 
    color: #fff; 
 
    margin: auto; 
 
    background: green; 
 
    word-break: break-all; 
 
}

<div class="wrapper"> 
 
    <div class="t0"> 
 
    <div class="s1">aaaaaaaaaaaaaaaaaaaaaabbbbbaaaaaabbba</div> 
 
    </div> 
 
</div>

来源

2016-07-28 05:56:12

但是单词中断：全部打破; –

@AndreyFedorov更新:) –

它包含，只是一个浏览器不能在文本，因为你必须从一个字一个文本移动到另一个地方。

.wrapper { 
 
    overflow: auto; 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: #f00; 
 
} 
 

 
.t0 { 
 
    height: 100px; 
 
    background-color: #00f; 
 
} 
 

 
.t0 .s1 { 
 
    font-size: 30px; 
 
    color: #fff; 
 
}

<div class="wrapper"> 
 
    <div class="t0"> 
 
    <div class="s1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    </div> 
 
</div>

来源

2016-07-28 05:59:37

<div class="wrapper"> 
Wrapper Class contains Red BG 
    <div class="t0"> 
     Your t0 Div Contains Black BG 
    <div class="s1">Your S1 Div</div> 
    </div> 
</div> 

<style type="text/css"> 
    .wrapper { 
// overflow: auto; 
    width: 300px; 
    height: 200px; 
    background-color: #f00; 
} 

.t0 { 
    height: 100px; 
    border: thin black solid; 
    background-color: #000000; 
    color: #fff; 

} 

.t0 .s1 { 
    font-size: 30px; 
    color: #fff; 

    border: thin red solid; 
} 

</style>

试试这个。如果它工作与否。

来源

2016-07-28 05:59:44

我从你的理解问题是在类s1的div中的文本是流出来避免这个你可以使用下面的CSS和这可以解决问题。

.t0 .s1 { 
    font-size: 30px; 
    color: #fff; 
    word-break: break-all; 
}

来源

2016-07-28 06:07:16

为什么这个小孩div不包含在父div的蓝色背景中？

回答

相关问题