Question

最新的chrome版本附带的css设置会产生奇怪的效果。

你知道为什么第二个盒子低于第一个盒子（见图片）吗？

display: inline-block;

欢迎一些帮助。

Answer 1

显示内联块完全如它所说的那样，如果在你的标记中你有任何空格它也将呈现这些空格（白色空间 - 它应该是一个错误 - 我认为它是一个错误，因为内联应该接下来接下来彼此），例子是你显示的。随着两个盒子的宽度和它们旁边的空间将导致盒子破裂。

有几种方法可以删除它：

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

或者你可以这样做：

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

将导致块显示内联彼此相邻。另一种解决方法是使用负余量：

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

还有将父元素设置为：

的解决方法

font-size：0;

或

white-space：nowrap;

我建议亲自在父元素上使用flexbox，因为这会阻止你的换行。

您可以在此处详细了解：

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

Answer 2

如果您希望将框锚定到顶部，则可以使用CSS vertical-align: top属性。

以下是示例

请以全屏模式查看，以便框格并排显示。

＆＃13;

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

＆＃13;

<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">
						<i class="ic3a-sep fa fa-cubes"></i>
						<div class="value">$4 500</div>
						<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">
						<i class="ic3a-sep">Icon</i>
						<div class="value">Amount</div>
						<div class="measure">AmountLabel</div>
            <div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>

＆＃13;

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">
						<i class="ic3a-sep fa fa-cubes"></i>
						<div class="value">$4 500</div>
						<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">
						<i class="ic3a-sep">Icon</i>
						<div class="value">Amount</div>
						<div class="measure">AmountLabel</div>
            <div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>

我刚从margin:15px课程中删除了ic3a-mini-box。您可以在浏览器中查看并看到您是否按预期获得结果？

希望这有帮助。

Chrome - 带效果的CSS效果效果：内联块

4 个答案: