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

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

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

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

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

第1个回答  2015-04-16

  用的是媒体查询,@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;
}

本回答被提问者和网友采纳
第2个回答  2015-04-16
先占坑,想好后再回答
相似回答