显示内联块的一些有线行为答案

【问题标题】：Some wired behavior for display inline block显示内联块的一些有线行为
【发布时间】：2017-03-30 13:24:57
【问题描述】：

更新这是一个inline-block元素是否包含某些东西的问题，您可以搜索它并找到更好的解决方案。

页面包含三个 div（灰色矩形），第一个 div（父）包含三个蓝色子 div。父 div 是 inline-block，子 div 也是一样的。为什么第一个 parent-div 向下移动？我认为它们应该排成一行。

<body>
    <section>
        <div class = "container">
            <div class = "load_1"></div>
            <div class = "load_1"></div>
            <div class = "load_1"></div>
        </div>
        <div class = "container">

        </div>
        <div class = "container">

        </div>
    </section>
</body>

css

           section{
                width:100%;
                height:100vh;
                background-color: rgba(236, 240, 241,1.0);
            }
            div.container{
                display: inline-block;
                width:150px;
                height:150px;
                margin:10px;
                background-color: rgba(189, 195, 199,1.0);
                border-radius: 5px;
            }
            div.container:first-child{
                margin-left: 20px;
            }
            div.container .load_1{
                width:20px;
                height:20px;
                display: inline-block;
                background-color: rgba(52, 152, 219,1.0);
            }

请在JSfiddle.查看这里

【问题讨论】：

stackoverflow.com/questions/9189810/… 在您的代码中添加float:left，如果您想正确了解，可以在此处阅读以获取更多信息
@ThanhTùng 非常感谢！
酷，如果它对你有帮助，请投票给我的 cmt ^^
@ThanhTùng 我已经知道了有关显示器的基本信息。但是我还是想知道为什么一个 inline-block 元素包含另一个 inline-block 元素的行为是这样的？
这里是你想知道的stackoverflow.com/questions/9273016/…。希望对你有帮助

标签： html css

【解决方案1】：

只需将float:left 放在div.container 上

检查下面的代码：

    section {
        width: 100%;
        height: 100vh;
        background-color: rgba(236, 240, 241, 1.0);
    }

    div.container {
    /* display: inline-block; */
        width: 150px;
        height: 150px;
        margin: 10px;
        background-color: rgba(189, 195, 199, 1.0);
        border-radius: 5px;
        float: left;
    }

    div.container:first-child {
        margin-left: 20px;
    }

    div.container .load_1 {
        width: 20px;
        height: 20px;
        display: inline-block;
        background-color: rgba(52, 152, 219, 1.0);
    }

<section>
    <div class="container">
        <div class="load_1"></div>
        <div class="load_1"></div>
        <div class="load_1"></div>
    </div>
    <div class="container">

    </div>
    <div class="container">

    </div>
</section>

【讨论】：

你能解释一下它为什么会这样吗？在添加浮动之前：left
@JungleDesigner - float:left 表示下一个元素必须浮动在其包含块的左侧
谢谢，但是你知道为什么一个 inline-block 元素包含另一个 inline-block 元素的行为是这样的吗？
@JungleDesigner 在您的示例中，您的一个容器在其中包含另一个 div 元素，而另外两个容器没有。它的行为就像它只使用容纳内容所需的大小而不是所有行。
@JungleDesigner 另一个例子。使用您的代码，但这次，我从您的代码中将一些元素放在另外 2 个容器上。在这里查看区别fiddle demo。它显示在 1 行，因为所有容器都有其内容

【解决方案2】：

只需添加 float: left 即可将所有内容向上和向左推。

    div.container:first-child{
        margin-left: 20px;
        float: left;
    }

【讨论】：

你能解释一下它为什么会这样吗？在添加浮动之前：left

【解决方案3】：

将vertical-align 规则添加到您的div.container 元素。

见下面的片段：

section{
			width:100%;
			height:100vh;
			background-color: rgba(236, 240, 241,1.0);
		}
		div.container{
			display: inline-block;
			width:150px;
			height:150px;
			margin:10px;
			background-color: rgba(189, 195, 199,1.0);
			border-radius: 5px;
      vertical-align: top;
		}
		div.container:first-child{
			margin-left: 20px;
		}
		div.container .load_1{
			width:20px;
			height:20px;
			display: inline-block;
			background-color: rgba(52, 152, 219,1.0);
		}

<body>
	<section>
		<div class = "container">
			<div class = "load_1"></div>
			<div class = "load_1"></div>
			<div class = "load_1"></div>
		</div>
		<div class = "container">

		</div>
		<div class = "container">

		</div>
	</section>
</body>

JSFiddle: https://jsfiddle.net/8bmdpqer/

【讨论】：