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

Question

我想要一个固定宽度的图像在左边，以及一个变宽度带有背景色的div，在我的设备上应该将其宽度扩展到100％。我无法阻止第二个div溢出我的固定div。

当我在变宽度div中添加overflow:hidden时，它会跳到照片下面的下一行。

我该如何正确解决这个问题（即不使用hack或margin-left，因为我需要使用媒体查询使网站响应，并且必须更改每个设备的分辨率图像）？

• 初学者网页设计师试图解决响应式网站的困难 -

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;
    }

- Anamaria Miehs

Answer 1

尝试从`.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>

- caitriona

---

非常感谢！它可以在iPhone和Android Galaxy S plus上运行！我想我只需要注意并制定正确的媒体查询min-device-pixel-ratio。 希望我能投票支持，但我太新了。 - Anamaria Miehs

如果您想要反转设置，使右侧的div固定，而可变宽度的div在左侧，那么只需将.header上的float:left更改为float:right，这样简单吗？我一直在http://jsfiddle.net/veW2z/14/上进行尝试，但似乎无法使其按照我想要的方式运行。 - Paul Gear

@PaulGear 是的，那样应该可以。但是要保持div的顺序不变。 - caitriona

有什么想法为什么http://jsfiddle.net/veW2z/19/没有做正确的事情吗？我找不到其他让它工作的方法，除了给左侧div添加一个超过右侧div宽度的margin-right。 - Paul Gear

我在 .header 和 .header-right 上使用了 height: 100% 进行测试。当使用 FireBug 进行检查时，.header-right 元素似乎填充了整个区域，而不仅仅是剩余的区域。这种行为有什么解释吗？ - Matthew Layton

Answer 2

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

• 您需要将这些 div 包装在一个包装器中，比如说 parent
• 给 .parent 添加 display: grid
• 在 .parent 中使用 grid-template-areas 和在两个 children 中使用 grid-area
• 不需要在两个 children 中使用 float: left，可以使用 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来回答问题，如果对某人有用的话 :)

- Zuber