Question

我想要一个左边有固定宽度图像的div和一个带有背景颜色的可变宽度div，它应该在我的设备上扩展它的宽度100％。我无法阻止第二个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;
    }

Answer 1

尝试从float:left移除width:100%和.header-right - 右div然后按要求行事。

请参阅this jsfiddle。

Answer 2

使用css grid可以更轻松地实现这一目标

您需要将这些div包装在包装器中，比如说parent
给予.parent display: grid
同时给grid-template-areas和.parent中的grid-area children
在两个float: left中都不需要使用children 使用grid-template-columns中的.parent调整左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的帮助下进行回答，即使它可能对某人有用：）

左侧固定宽度div，右侧填充剩余宽度div

2 个答案: