使用内联块将页面分成列不起作用

Question

我想通过使用inline-block而不是使用float：left来获得解决方案。

＆＃13;

＆＃13;

    *{
	    margin:0;
		padding:0;
	}
	body{
	    margin:0;
		padding:0;
	}

＆＃13;

 <div style="width: 50%;background-color: #4caf50;display: inline-block;">
	    Section 1
    </div>

	<div style="width: 50%;background-color: #ff5722;display: inline-block;">
	    Section 2
    </div>

＆＃13;

＆＃13;

＆＃13;

有解决方案吗？

Answer 1

元素之间有空格（换行符和几个标签计为空格，只是为了清楚）。最小化HTML将解决此问题

＆＃13;

＆＃13;

*{
    margin:0;
    padding:0;
}
body{
    margin:0;
    padding:0;
}

＆＃13;

<div style="width: 50%;background-color: #4caf50;display: inline-block;">Section 1</div><div style="width:50%;background-color: #ff5722;display: inline-block;">Section 2</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试使用容器和display: flex，如下例所示：

＆＃13;

＆＃13;

.container {display: flex}
.one {background-color: red; width: 50%}
.two {background-color: blue; width: 50%}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

inline-block考虑了空白。你需要删除它才能使这项工作

＆＃13;

＆＃13;

<div style="width: 50%;background-color: #4caf50;display: inline-block;">Section 1</div><div style="width: 50%;background-color: #ff5722;display: inline-block;">Section 2</div>

＆＃13;

＆＃13;

＆＃13;