Question

CSS里实现两个div并排，且无论如何，不会换行。

问题来源与百度首页，主要为了解决百度首页问题。

百度首页最上边天气和宝箱，页面最大化如图显示

页面缩小一定比例时，天气，与宝箱仍然位于边缘，两部分之间间隔变小。

页面继续缩小以后，间隔开始固定，取而代之的是宝箱除部分文字被遮盖。这是如何实现的啊





Answer 1

　　用的是媒体查询，@media，在不同的屏幕宽度下显示不同的样式。下面是个媒体查询的例子。

追问

不用媒体查询不可以吗？单纯的通过div排布

追答

用百分比，还有最小宽度。

追问

大神什么意思？
我想通过两个div并排，一个float左，一个float右。都向中间留出一些空白。这样当页面缩小时一开始间隔变小，等到两个div边缘相撞，间隔就会固定。但是实际效果右边的div会被挤下来。所以想问一下有没有方法让两个div始终保持一行

追答

<div class="main">
    <div class="left"></div><div class=‘right"></div>
</div>

.left,.right{
  width:50%;
  display:inline-block;
  min-width:300px;
}
.main{
  font-size:0;
}

Answer 2

先占坑，想好后再回答