Question

以下是代码：

＆＃13;

.wrapper {
  overflow: auto;
  width: 300px;
  height: 200px;
  background-color: #f00;
}

.t0 {
  height: 100px;
  background-color: #00f; 
}

.t0 .s1 {
  font-size: 30px;
  color: #fff;
}

＆＃13;

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

＆＃13;

我希望div.s1的蓝色背景中包含div.t0。

我发现div.s1和div.t0的宽度都是300像素非常混乱。

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

问题：

如何在div.s1的蓝色背景中包含div.t0
此行为的相关规范在哪里？

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

Answer 1

它被包含，只是浏览器无法将文本移动到另一个地方，因为你有一个单词的文字。

.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>

Answer 2

如果您希望整个单词的背景为蓝色，则
试试this
（将display: inline-block;添加到t0）

注意：这会使你的div内联（你必须在它们之后添加换行符＆lt; br /＆gt;以使它们像以前那样位置）

Answer 3

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

＆＃13;

publi function index(){
            $category_count = $this->Categories->find('all')->count();
            $this->set('category_count',$category_count );
            //get all categories
            $categories=$this->Categories->find('all');
            $this->set('categories', $categories);
    }


    <div class="col-xs-12 col-md-6 col-lg-3 widget">
            <div class="panel panel-red panel-widget">
                <div class="row no-padding">
                    <div class="col-sm-3 col-lg-5 widget-left">
                        <svg class="glyph stroked app-window-with-content"><use xlink:href="#stroked-app-window-with-content"></use></svg>
                    </div>
                    <div class="col-sm-9 col-lg-7 widget-right">
                        <div class="large"><?php echo $category_count; ?></div>
                        <div class="text-muted">Categories</div>
                        <?php 
                            foreach($categories as $category){
                            ?>
                            <p>$category['Category']['name']</p>
                            <?php
                            }
                        ?>
                    </div>
                </div>
            </div>
        </div>

＆＃13;

.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;
}

＆＃13;

Answer 4

<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>

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

Answer 5

我从你这里理解的问题是，类s1的div中的文字是流出来的，为了避免这种情况你可以使用下面的css，这可以解决问题。

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

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

5 个答案: