Chrome - CSS效果與顯示：內嵌塊

Question

最新的chrome版本附帶的css設置有一個奇怪的效果。

你知道爲什麼第二個盒子在第一個盒子下面嗎（見圖片）？

display: inline-block; 

歡迎一些幫助。

Answer 1

如果你想框錨定到頂部，你可以使用CSS vertical-align: top財產。

下面是示例，

請查看它在全屏幕模式，使得箱並排顯示。

.ic3a-container { 
 
    width: 100%; 
 
    color: white; 
 
} 
 

 
.ic3a-mini-box-c { 
 
    display: inline-block; 
 
    width: 500px; 
 
    vertical-align:top; 
 
} 
 

 
.ic3a-mini-box { 
 
    height: 100px; 
 
    margin: 15px; 
 
    padding: 20px; 
 
    background-color:#990033; 
 
    
 
} 
 
    
 
.ic3a-mini-box i { 
 
    display: block; 
 
    height: 100%; 
 
    line-height:100px; 
 
    font-size: 60px; 
 
    width: 100px; 
 
    float: left; 
 
    text-align: center; 
 
    border-right: 2px solid rgba(255, 255, 255, 0.5); 
 
    margin-right: 20px; 
 
    padding-right: 20px; 
 
    color: white; 
 
} 
 

 
.ic3a-mini-box .value { 
 
    font-size: 2em; 
 
} 
 

 
.ic3a-mini-box .measure { 
 
    font-size: 1.5em; 
 
} 
 

 
.ic3a-mini-box .description { 
 
    margin-top: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<div class="ic3a-container"> 
 
    
 
<div class="ic3a-mini-box-c"> 
 
<div class="ic3a-mini-box"> 
 
\t \t \t \t \t \t <i class="ic3a-sep fa fa-cubes"></i> 
 
\t \t \t \t \t \t <div class="value">$4 500</div> 
 
\t \t \t \t \t \t <div class="measure">License</div> 
 
      <div class="description"><span class="diff">+23%</span>difference from previous quarter</div> 
 
</div> 
 
</div> 
 
    
 
<div class="ic3a-mini-box-c"> 
 
<div class="ic3a-mini-box"> 
 
\t \t \t \t \t \t <i class="ic3a-sep">Icon</i> 
 
\t \t \t \t \t \t <div class="value">Amount</div> 
 
\t \t \t \t \t \t <div class="measure">AmountLabel</div> 
 
      <div class="description"><span class="diff">Amount2</span> Amount2Label</div> 
 
</div> 
 
</div> 
 
</div>

Answer 2

顯示直列塊不正是因爲它說，如果你的標記您有任何空格就會使這些空間以及（白色空間 - 這是所謂的錯誤 - 我認爲這是一個錯誤因爲內聯應該彼此相鄰），示例就是您所展示的內容。隨着兩個盒子的寬度和它們旁邊的空間都會導致盒子崩潰。

有幾種方法可以刪除此：

<div>Element</div><!-- 
--><div>Element 2<div> 

，或者你可以這樣做：

<div>Element</div><div>Element</div> 

將導致塊內嵌顯示彼此相鄰。以對付這個另一種方式是使用負餘量：

.class{ 
    margin-left: -3px; 
} 

還有父元素設置的變通方法：

字體大小：0;

或

空白：NOWRAP;

我會建議在父元素上使用flexbox，因爲這會阻止您的換行符發生。

你可以閱讀更多關於此這裏：

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

其實它的工作的罰款，因爲只有預期的，當下面來指當容器寬度的爲什麼，因爲你給width: 100%;給家長，給定的固定寬度的子元素的屏幕減少，還是你想要並排只給white-space: nowrap;給父元素。

還有另一種方式，你可以給display: table;父元素和給孩子的display: table-cell;。它不會降下來了

Answer 4

.ic3a-container { 
 
    width: 100%; 
 
    color: white; 
 
} 
 

 
.ic3a-mini-box-c { 
 
    display: inline-block; 
 
    width: 500px; 
 
} 
 

 
.ic3a-mini-box { 
 
    height: 100px; 
 
/* margin: 15px;*/ 
 
    padding: 20px; 
 
    background-color:#990033 
 
} 
 
    
 
.ic3a-mini-box i { 
 
    display: block; 
 
    height: 100%; 
 
    line-height:100px; 
 
    font-size: 60px; 
 
    width: 100px; 
 
    float: left; 
 
    text-align: center; 
 
    border-right: 2px solid rgba(255, 255, 255, 0.5); 
 
    margin-right: 20px; 
 
    padding-right: 20px; 
 
    color: white; 
 
} 
 

 
.ic3a-mini-box .value { 
 
    font-size: 2em; 
 
} 
 

 
.ic3a-mini-box .measure { 
 
    font-size: 1.5em; 
 
} 
 

 
.ic3a-mini-box .description { 
 
    margin-top: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<div class="ic3a-container"> 
 
    
 
<div class="ic3a-mini-box-c"> 
 
<div class="ic3a-mini-box"> 
 
\t \t \t \t \t \t <i class="ic3a-sep fa fa-cubes"></i> 
 
\t \t \t \t \t \t <div class="value">$4 500</div> 
 
\t \t \t \t \t \t <div class="measure">License</div> 
 
      <div class="description"><span class="diff">+23%</span>difference from previous quarter</div> 
 
</div> 
 
</div> 
 
    
 
<div class="ic3a-mini-box-c"> 
 
<div class="ic3a-mini-box"> 
 
\t \t \t \t \t \t <i class="ic3a-sep">Icon</i> 
 
\t \t \t \t \t \t <div class="value">Amount</div> 
 
\t \t \t \t \t \t <div class="measure">AmountLabel</div> 
 
      <div class="description"><span class="diff">Amount2</span> Amount2Label</div> 
 
</div> 
 
</div> 
 
</div>

我剛剛從ic3a-mini-box類中刪除margin:15px。 你可以檢查瀏覽器，看看你是否得到預期的結果？

希望這會有所幫助。