为什么我的两个元素没有在同一排？

Question

http://js.jirengu.com/pofiw/1...

Answer 1

border边框也占了宽度，加起来超过800px

Answer 2

设置了边框，边框要占像素

Answer 3

把max-width改成width或者min-width，注意这几个的区别，还有取消wrapper的border，注意基本的计算

Answer 4

border也有宽度 你可以看下盒模型

Answer 5

max-width表示最大宽度，此时width取值范围为0~max-width，具体的值会综合去判断：内部元素大小，可视窗口大小等。

如果可视窗口小于你给的值，那它当然就会取可视窗口的值啦~

不信你试试把html和css窗口关掉？是不是就在一排了？~

所以如果需求是一定要在一排显示，建议固定width或者写成min-width；

border嘛，wrapper的不用管，但是内部元素不能有。

先解释不用管的:
为什么不用管呢，因为现在wrapper的box-sizing属性是默认值content-box，你加的border会加到wrapper上，也就是(800+1)px，所以对布局是没有任何影响的啦~

内部元素为什么不能添加：
border会加到盒子的宽度上，而不管怎么样，wrapper内部空间始终只有800px,如果给main加一个border 1px，那它内部空间就需要802px，不够，当然就掉下去了

Answer 6

只要设置border 属性了， 你就加一个box-sizing:border-box; 然后感觉你最后的 max-width:800px;感觉也有问题。不明白你为什么这么写

Answer 7

你可以使用flex布局

Answer 8

建议使用flex布局

Answer 9

你的<aside></aside><main></main> 是使用的inline-block虽然连写可以解决中间间隙的问题，但并不建议这么做，你可以看下其他解决方案https://segmentfault.com/a/11...
另外你的换行问题是由border引起的，border 的 1px 不是包含在<aside></aside><main></main>内的，所以<aside>的占空应该是200px+2px剩下的空间600px-2px不足以摆放<main>的600px+2px的宽，所以会换行
你可以通过加上css 属性box-sizing:border-box;可以把border的1px包含在200px内，
所以，最终代码是

body{
  margin: 0;
}
aside {
   display: inline-block;
   background: #666;
   min-height: 200px;
   width: 200px;
   border:solid 1px #0f0;
   box-sizing:border-box;
}
 main{
   display: inline-block;
   min-height: 400px;
   width: 600px;
   vertical-align: top;
   border:solid 1px #00f;
   box-sizing:border-box;
   background: #333;
 }  
.wrapper{
   min-width: 800px;
   margin: 0 auto;
}

Answer 10

因为宽度加边框宽度超过了外面设置的800px

Answer 11

加一句
box-sizing:border-box;