Question

更新的问题是内联块元素是否包含某些内容，您可以搜索它并找到更好的解决方案。

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

PromptDialog.Choice

CSS

<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>

请在PromptDialog.Choice

中查看

Answer 1

只需添加float：left即可向上推动所有内容。

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

Answer 2

只需将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>

Answer 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/

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

3 个答案: