首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >左侧固定宽度div,右侧填充剩余宽度div

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

Stack Overflow用户
提问于 2012-10-04 18:09:31
回答 2查看 40.7K关注 0票数 51

我想要一个左边有固定宽度图像的div和一个有背景颜色的可变宽度div,这应该会在我的设备上扩展它的宽度100%。我不能阻止第二个div溢出我固定的div。

当我添加overflow:隐藏在可变宽度的div时,它只是跳到下一行的照片下面。

我如何才能以正确的方式解决这个问题(即没有hack或空白区,因为我需要让网站稍后响应媒体查询,并且我必须用每个设备的其他分辨率图像来更改图像)?

  • 初学者试图解决响应式网站的恐怖问题-

HTML:

代码语言:javascript
复制
<div class="header"></div>
<div class="header-right"></div>

CSS:

代码语言:javascript
复制
.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;
    }
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-10-04 18:54:40

尝试从.header-right中删除float:leftwidth:100% -然后正确的div将按照请求运行。

代码语言:javascript
复制
.header {
  float: left;
  background: #efefef;
  background-repeat: no-repeat;
  width: 240px;
  height: 100px;
}

.header-right {
  overflow: hidden; 
  background-color: #000;
  height: 100px;
}
代码语言:javascript
复制
<div class="header"></div>
<div class="header-right"></div>

票数 58
EN

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的宽度。

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<div class="parent">
  <div class="header"></div>
  <div class="header-right"></div>
</div>

css已经变得更高级,并在高级css的帮助下回答,如果它对某些人有用的话:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12724967

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档