將內容展開爲完整父寬度

我想將子內容展開爲完整寬度。我試過了一切，我不知道可以運行什麼。我只使它以最小寬度運行：n px;但我不想以像素爲單位定義特定的寬度，因爲設計在較小的屏幕中不適應。將內容展開爲完整父寬度

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

來源

2016-02-13 tiranium

爲什麼要使用'display：table-row;'和'display：table-cell;'？沒有那個孩子divs將是全部寬度。 – Lal

你的意思是你想讓內容擴展到表格之外嗎？因爲它已經在其父母的整個寬度，即，ficha_cell – Nijeesh

你爲什麼在.ficha_container上設置兩次顯示？如果你只是使用display：table;並添加寬度：100％，它似乎給你你想要的。 – j08691

假設你想要一個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>

來源

2016-02-13 19:18:19 LGSon

將內容展開爲完整父寬度

回答

相關問題