內聯塊與段落不斷跳

我想使3個框相鄰的文本中。到目前爲止，我得到的框設置正確。但是當我添加文本時，它會跳躍式跳躍。當我在div中輸入相同數量的段落標記時，它們都對齊。但是當一個div有1段標籤，其他有2段時，它們不再對齊。我不知道如何解決這個問題。內聯塊與段落不斷跳

的jsfiddle：https://jsfiddle.net/gegc8nuk/

.row { 
 
    max-width: 1140px; 
 
    margin: 0 auto; 
 
} 
 
section { 
 
    padding: 80px 0; 
 
} 
 
.wrap { 
 
    display: table; 
 
    /* Webkit Fix */ 
 
    width: 100%; 
 
    /* set width to stop display table shrink to fit */ 
 
    word-spacing: -1em; 
 
    /* hide whitespace nodes (not in webkit) - will never overlap even if zoomed */ 
 
} 
 
.tox { 
 
    display: inline-block; 
 
    height: 200px; 
 
    width: 100%; 
 
    word-spacing: 0; 
 
    color: #fff; 
 
    padding: 5%; 
 
    /* reset parent */ 
 
} 
 
.red { 
 
    background-color: #9a0000; 
 
} 
 
.green { 
 
    background-color: #4ce215; 
 
} 
 
.blue { 
 
    background-color: #240fc3; 
 
}

<section> 
 
    <div class="row"> 
 
    <div class="wrap"> 
 
     <div class="tox red span-1-of-3"> 
 
     <p>Hello</p> 
 
     </div> 
 
     <div class="tox green span-1-of-3"> 
 
     <p>Hello</p> 
 
     </div> 
 
     <div class="tox blue span-1-of-3"> 
 
     <p>Hello</p> 
 
     <p>Hello</p> 
 
     <p>Hello</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-02-10 Pixelsquare

什麼是你期望的輸出？ *「上下跳動」的含義是什麼？ – ketan

垂直對齊內嵌塊元素並排使用...'vertical-align：top;' –

如果你使用一次顯示：表;你爲什麼不在孩子身上使用表格單元格？

https://jsfiddle.net/gegc8nuk/1/

.row { 
 
    max-width: 1140px; 
 
    margin: 0 auto; 
 
} 
 
section { 
 
    /*padding: 80px 0;*/ 
 
} 
 
.wrap { 
 
    display: table;  
 
    width: 100%; 
 
    /* set width to stop display table shrink to fit 
 
    word-spacing: -1em; 
 
    hide whitespace nodes (not in webkit) - will never overlap even if zoomed */ 
 
} 
 
.tox { 
 
    display: table-cell; 
 
    /* height: 200px; */ 
 
    /*width: 100%; 
 
    word-spacing: 0;*/ 
 
    color: #fff; 
 
    padding: 5%; 
 
    /* reset parent */ 
 
} 
 
.red { 
 
    background-color: #9a0000; 
 
} 
 
.green { 
 
    background-color: #4ce215; 
 
} 
 
.blue { 
 
    background-color: #240fc3; 
 
}

<section> 
 
    <div class="row"> 
 
    <div class="wrap"> 
 
     <div class="tox red span-1-of-3"> 
 
     <p>Hello</p> 
 
     </div> 
 
     <div class="tox green span-1-of-3"> 
 
     <p>Hello</p> 
 
     </div> 
 
     <div class="tox blue span-1-of-3"> 
 
     <p>Hello</p> 
 
     <p>Hello</p> 
 
     <p>Hello</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-02-10 12:24:38

哈哈我覺得很愚蠢我tottaly看過去..謝謝提醒我！ – Pixelsquare

隨着你的CSS你已經設置tox用100％的寬度，同時保持inline-block，而應用wrap爲display: table;。兩者都不同。你可以做到以下幾點：

編輯你的CSS：

.wrap { 
    display: block; 
    /* Webkit Fix */ 
    width: 100%; 
    /* set width to stop display table shrink to fit */ 
    word-spacing: -1em; 
    /* hide whitespace nodes (not in webkit) - will never overlap even if zoomed */ 
} 
.tox { 
    display: inline-block; 
    height: 200px; 
    width: 33.333%; 
    padding: 10px; 
    word-spacing: 0; 
    color: #fff; 
    vertical-align: top; 
    box-sizing: border-box; 
    /* reset parent */ 
}

小提琴：https://jsfiddle.net/debraj/gegc8nuk/2/

來源

2016-02-10 12:34:58 DebRaj

這工作得很好，謝謝指出！ – Pixelsquare

內聯塊與段落不斷跳

回答

相關問題