Question

我有两个div彼此相邻。右边的div是300px x 335px。左边的div一直向下。我希望左div的宽度一直到正确的div。然后在右边的div下，它占用了页面的整个宽度。这可能吗？

Answer 1

div元素为block level elements。所以他们就像方块。不，他们无法按你的要求工作。但是，您可以使用Google for CSS Shapes查看它是否可以执行您希望的操作，但它并非在所有浏览器中都可用，并且仍然与您请求的完全相同。

Answer 2

这里有一些选项，你可以添加min-width到short div和long div来扩展它。或者你可以添加一个背景色的身体来伪造它的错觉。但就像Rob说的那样，没有好办法可以解决问题。

.short {
  width: 100px; height: 100px; 
  background:red;
  float:left;
  
  //min-height: 500px; 
}
.long {
  width: 100px; height: 500px;
  background:blue;
  float:left;
  
  //min-height: 500px;
}
.width {
  width: 100%;  
  height: 200px;
  background:yellow;
}
.clearfix {
  overflow: auto;
  zoom: 1;
}

body {
  // background-color: red;
}

<div class="clearfix">
    <div class="short"></div>
    <div class="long"></div>
</div>
<div class="width"></div>

Answer 3

这是达到你想要的方法之一 CSS

＆＃13;

    #left1 {
    margin-right: 300px;
    height: 335px;
    background: #aaa;
    }
    #right {
    width: 300px;
    height: 335px;
    float: right;
    }
    #left2 {
    background: #aaa;
    border: 1px soild #000;
    min-height: 300px;
    }

＆＃13;

    <div id="right"></div>
    <div id="left1"></div>
    <div id="left2"></div>

＆＃13;

Answer 4

这是不可能的，虽然你总是可以在右边的那个下放另一个div并设置边距，使它看起来像是左边那个的一部分。

制作一个有两个宽度的div

4 个答案: