製作兩個寬度的div

Question

我有兩個彼此相鄰的div。右邊的div是300px x 335px。左邊的分區一直沿着頁面向下。我希望左邊div的寬度一直走到右邊的div。然後在正確的div下，它佔據整個頁面的寬度。這可能嗎？

Answer 1

div元素是block level elements。所以他們就像方塊。不，他們不能按你的要求工作。但是，您可以使用Google for CSS Shapes來查看它是否可以實現您的願望，但它在所有瀏覽器中都不可用，並且與請求的內容不完全相同。

Answer 2

下面是一些選項，您可以將最小寬度添加到短div和長div來擴展它。或者你可以添加一個背景顏色的身體來僞造它的幻覺。但像羅布說的那樣，沒有什麼好辦法可以解決。

.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

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

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

Answer 4

那是不可能的，人儘管你總是可以在右邊的那個下面放置另一個div，並設置邊緣，使它看起來像是左邊一個的一部分。