左侧固定宽度div，右侧填充剩余宽度div
左侧固定宽度div，右侧填充剩余宽度div
提问于 2012-10-04 18:09:31
我想要一个左边有固定宽度图像的div和一个有背景颜色的可变宽度div，这应该会在我的设备上扩展它的宽度100%。我不能阻止第二个div溢出我固定的div。
当我添加overflow:隐藏在可变宽度的div时，它只是跳到下一行的照片下面。
我如何才能以正确的方式解决这个问题(即没有hack或空白区，因为我需要让网站稍后响应媒体查询，并且我必须用每个设备的其他分辨率图像来更改图像)？
- 初学者试图解决响应式网站的恐怖问题-
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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-04 18:54:40
尝试从.header-right中删除float:left和width:100% -然后正确的div将按照请求运行。
.header {
float: left;
background: #efefef;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.header-right {
overflow: hidden;
background-color: #000;
height: 100px;
}<div class="header"></div>
<div class="header-right"></div>
Stack Overflow用户
发布于 2019-09-18 21:58:41
使用css grid可以更容易地实现这一点
对于这两个display: grid
- give，您需要将它们包装在一个包装器中，假设
-
parent
- 在
children
- no和
.parent
中都使用D16和.parent中的grid-area，则需要在D17中使用D16grid-area>在D17中使用调整左侧div的宽度。
.parent {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "header-left header-right";
}
.header {
background-image: url(img/header.png);
background-color: #ebebeb;
background-repeat: no-repeat;
height: 100px;
grid-area: header-left;
}
.header-right {
overflow: hidden;
background-color: #000;
width: 100%;
height: 100px;
grid-area: header-right;
}<div class="parent">
<div class="header"></div>
<div class="header-right"></div>
</div>
css已经变得更高级，并在高级css的帮助下回答，如果它对某些人有用的话:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12724967
复制相关文章
相似问题
腾讯云开发者
