Question

我试图实现以下布局：两个并排的容器，第一个容器具有固定的宽度，第二个容器延伸整个屏幕的长度。第二个容器有一个带有边距的子容器，它可以拉伸其父容器的整个长度。

我已经通过以下方式实现了这一目标，但它看起来很笨拙，我认为这是一个更好的方法，但我画了一个空白。如果存在，你能提供更好的解决方案吗？

CSS：

 .c1 {
        display: table;
        width:100%;
        height:40px;
        border:2px solid black;
    }

.c1> div:first-child  {
    display:table-cell;
    width:100px;
    background-color:blue;
}

.c1> div:last-child  {
    display:table-cell;
}

.c1 > div:last-child > div {
    position:relative;
    height:100%;
    width:100%
}

.c1> div:last-child > div > div {
    position:absolute;
    left:5px;
    right:5px;
    bottom:5px;
    top:5px;
    background-color:red;
    border-radius:10px;
}

HTML：

<div class="c1">
    <div>
    </div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

Answer 1

我认为display: table-cell在这里不合适。

我将margin-left与float属性结合使用。

选中此fiddle

.c1 {
    width:100%;
    height:40px;
    border:2px solid black;
}
.c1> div:first-child {
    width:100px;
    background-color:blue;
    height: 100%;
    float: left;
}
.c1> div:last-child {
    margin-left: 100px;
    height: 100%;
}
.c1 > div:last-child > div {
    position:relative;
    height:100%;
    width:100%
}
.c1> div:last-child > div > div {
    position:absolute;
    left:5px;
    right:5px;
    bottom:5px;
    top:5px;
    background-color:red;
    border-radius:10px;
}

Answer 2

5年内发生了多少变化真是疯狂。万一有人发现此问题，这是截至2020年4月2日（冠状病毒年）的最简单解决方案。自Flexbox推出以来，这就是您所需要的。

HTML

<div class="parent">

  <div class="child-1">
  </div>

  <div class="child-2">
  </div>

</div>

CSS


.parent{
  background:blue;
  padding:2px;
  height:40px;
  display:flex;
}
.child-1{
  flex-basis:100px;
  background:green;
}
.child-2{
  background:yellow;
  flex-grow:1;
}

这是一个Codepen。 https://codepen.io/hundredbillion/pen/mdJgYja

两个并排的容器，一个伸展

2 个答案: