左侧固定宽度div,右侧填充剩余宽度div
我想要一个左侧有固定宽度图像的div和一个带背景色的可变宽度div,它应该在我的设备上扩展其宽度100%。 我无法阻止第二个div溢出我的固定div。左侧固定宽度div,右侧填充剩余宽度div
当我添加溢出:隐藏在变量宽度div它只是跳下在照片下,在下一行。
如何解决这个问题的正确方法(即不需要使用黑客或保证金,因为我需要使网站能够响应媒体查询,并且必须为每个设备更改其他分辨率图像)?
- 初学者网页设计师试图解决网站的响应的恐怖 -
HTML:
<div class="header"></div>
<div class="header-right"></div>
CSS:
.header{
float:left;
background-image: url('img/header.png');
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.header-right{
float:left;
overflow:hidden;
background-color:#000;
width: 100%;
height: 100px;
}
尝试从.header-right
取出float:left
和width:100%
- 正确的div
然后按要求行事。
请参阅this jsfiddle。
非常感谢!它适用于iPhone和Android Galaxy S plus!我认为我只需要小心,并做出正确的媒体查询最小设备像素比。 希望我可以投票,但我太新了。 –
如果你想颠倒这个设置,并且在右边有固定的div和左边的可变宽度的div,是否会像改变float一样简单:留在.header上是float:right?我在http://jsfiddle.net/veW2z/14/上一直在玩这个游戏,而且我似乎无法让它按照我想要的方式行事。 –
@PaulGear是的,应该这样做。保持div的顺序不变。 – caitriona
+1为好标题。 – QMaster