将内容展开为完整父宽度

  • Z时代
  • 2024-01-10
  • 分类：问答

我想将子内容展开为完整宽度。我试过了一切，我不知道可以运行什么。 我只使它以最小宽度运行：n px;但我不想以像素为单位定义特定的宽度，因为设计在较小的屏幕中不适应。将内容展开为完整父宽度

https://jsfiddle.net/tiranium/e8w22j39/

HTML

<div class="ficha_container"> 
    <div class="ficha_row"> 
    <div class="ficha_cell"> 
     <h1>Title</h1> 
     <p>Content.</p> 
    </div> 
    </div> 
</div>

CSS

.ficha_container { 
    display: table; 
    background-color: green; 
    box-sizing: border-box; 
    overflow: hidden; 
    display: block; 
} 
.ficha_row { 
    display: table-row; 
} 
.ficha_cell { 
    display: table-cell; 
} 
.ficha_cell p { 
    background: pink; 
}

回答：

假设你想要一个display:table的解决方案，你也不能添加display: block相同的元素。

我的猜测你为什么这样做，是为了让它完整的宽度。

为了使table全宽你可以将它设置为100％，因此，让您的现有标记正常工作，从.ficha_container删除display: block，并添加width: 100%;

.ficha_container{  
    display:table;  
    background-color: green;  
    box-sizing: border-box;  
    width: 100%;  
}  
.ficha_row{  
    display:table-row;  
}  
.ficha_cell{  
    display: table-cell;  
}  
.ficha_cell p{  
    background: pink;  
}

<div class="ficha_container">  
    <div class="ficha_row">  
    <div class="ficha_cell">  
     <h1>Title</h1>  
     <p>Content.</p>  
    </div>  
    </div>  
</div>

以上是 将内容展开为完整父宽度 的全部内容， 来源链接： utcz.com/qa/265167.html

回到顶部