將列寬保持爲「display：table」

我有一排佔據了我屏幕高度的25％。它被設置爲display:table。其中的列全部爲33.333％，設置爲display:table-cell。現在，如果有3列，它們可以很好地工作，它們佔用相等的寬度，每行3個。但是如果我添加第四列，第四列不會顯示33.333％的寬度，也不會下降到第二行並居中。有沒有可能做到？將列寬保持爲「display：table」

我希望額外的列寬度也是33.333％，並且位於第一行下方的中間位置。

.row-flex { 
 
    display: table; 
 
    width: 100%; 
 
    height: 25%; 
 
    margin 0 auto; 
 
} 
 
.one-third-flex.column { 
 
    width: 33.3333%; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    float: none; 
 
}

<div class="row row-flex buttons-bottom row-one-half text-body"> 
 
    <div class="one-third-flex column" style="background-color:red">&nbsp;</div> 
 
    <div class="one-third-flex column" style="background-color:green">&nbsp;</div> 
 
    <div class="one-third-flex column" style="background-color:yellow">&nbsp;</div> 
 
    <div class="one-third-flex column" style="background-color:pink">&nbsp;</div> 
 
</div>

來源

2016-06-17 user1038814

您可以使用柔性是最接近表的行爲。

.row-flex { 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
    justify-content:center; 
 
    width: 100%; 
 
    height: 25%; 
 
    margin 0 auto; 
 
} 
 
.one-third-flex.column { 
 
    width: 33.3333%; 
 
    text-align:center; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
html, 
 
body { 
 
    height:100%; 
 
    margin:0; 
 
    }

<div class="row row-flex buttons-bottom row-one-half text-body"> 
 
    <div class="one-third-flex column" style="background-color:red">&nbsp;1</div> 
 
    <div class="one-third-flex column" style="background-color:green">&nbsp;2</div> 
 
    <div class="one-third-flex column" style="background-color:yellow">&nbsp;3</div> 
 
    <div class="one-third-flex column" style="background-color:pink">&nbsp;4</div> 
 
</div>

或內聯塊與一些調諧

.row-flex {text-align:center; 
 
    width: 100%; 
 
    height: 25%; 
 
    margin 0 auto; 
 
    font-size:0; 
 
} 
 
.one-third-flex.column { 
 
    width: 33.3333%;display:inline-block; 
 
    font-size:1rem; 
 
    /* where it starts to go wrong with the layout you look for */ 
 
    height:50%;/* hmmm */ 
 
    white-space:nowrap; 
 
} 
 

 
/* vertical-centering in inline-block boxes */ 
 
.one-third-flex.column:before { 
 
    content:''; 
 
    height:100%; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    } 
 
/* .one-third-flex.column must have a single child to hold content div, p, or whatever */ 
 
.one-third-flex.column>* { 
 
    display:inline-block; 
 
    max-width:99%; 
 
    white-space:normal; 
 
    vertical-align:middle; 
 
    } 
 
/* end trouble but not flexible & unsolved totaly */ 
 
html, 
 
body { 
 
    height:100%; 
 
    margin:0; 
 
    }

<div class="row row-flex buttons-bottom row-one-half text-body"> 
 
    <div class="one-third-flex column" style="background-color:red"><p>1</p></div> 
 
    <div class="one-third-flex column" style="background-color:green"><p>2</p></div> 
 
    <div class="one-third-flex column" style="background-color:yellow"><p>3</p></div> 
 
    <div class="one-third-flex column" style="background-color:pink"><p>4</p></div> 
 
</div>

（試驗都代碼段在全頁模式看到高度充分行爲）

來源

2016-06-17 21:21:17

使用浮動：左代替無修改後的代碼。

.one-third-flex.column 
{ 
width: 33.3333%; 
display: table-cell; 
text-align: center; 
vertical-align: middle; 
float: left; 
}

來源

2016-06-17 21:03:05

太棒了。我如何着手對準下面的列？有任何想法嗎？ – user1038814

.one-third-flex.column：last-child { float：none; margin：0 auto; } –

使用此：

.row-flex { 
    display: table; 
    width: 100%; 
    height: 25%; 
    margin 0 auto; 
} 
.one-third-flex.column { 
    width: 33.3333%; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    float: left; 
} 

.one-third-flex.column:last-child { 
margin-left:33.333%; 
}

Demo

來源

2016-06-17 21:11:27 NickyTheWrench

將列寬保持爲「display：table」

回答

相關問題