CSS：自動調整div以適合容器寬度

我有兩個<div>：左和內容。這兩個在包裝 div有min-width:960px;。左有固定寬度，但我想使內容靈活，最小寬度爲700px，如果屏幕較寬，則將其粘貼到屏幕的右側邊界。
screenshot CSS：自動調整div以適合容器寬度

CSS：

#wrapper 
{ 
    min-width:960px; 
    margin-left:auto; 
    margin-right:auto; 
} 
#left 
{ 
    width:200px; 
    float:left; 
    background-color:antiquewhite; 
    margin-left:10px; 
} 
#content 
{ 
    min-width:700px; 
    margin-left:10px; 
    width:auto; 
    float:left; 
    background-color:AppWorkspace; 
}

的jsfiddle：http://jsfiddle.net/Zvt2j/

來源

2013-01-14 Maysam

重複http://stackoverflow.com/questions/7051768/justify-divs-with-css-to-fill-width-of-parent-container – primetwig

只需將'float：right;'添加到'＃content' div :) – Morpheus

@Morpheus不起作用 – Maysam

您可以overflow:hidden您#content。像這樣寫：

#content 
{ 
    min-width:700px; 
    margin-left:10px; 
    overflow:hidden; 
    background-color:AppWorkspace; 
}

入住這http://jsfiddle.net/Zvt2j/1/

來源

2013-01-14 13:34:23 sandeep

CSS auto-fit container between float:left & float:right divs解決我的問題，感謝您的意見。

#left 
{ 
    width:200px; 
    float:left; 
    background-color:antiquewhite; 
    margin-left:10px; 
} 
#content 
{ 
    overflow:hidden; 
    margin-left:10px; 
    background-color:AppWorkspace; 
}

來源

2013-01-14 13:34:22 Maysam

我已經更新您的jsfiddle，這裏是CSS改變你需要做的：

#content 
{ 
    min-width:700px; 
    margin-right: -210px; 
    width:100%; 
    float:left; 
    background-color:AppWorkspace; 
}

來源

2013-01-14 13:36:42 Morpheus

你可以使用CSS3靈活的盒子，它會去像這樣：

首先你的包裝包裝很多東西，所以你只需要一個包裝2只水平浮動框：

<div id="hor-box"> 
    <div id="left"> 
     left 
     </div> 
    <div id="content"> 
     content 
    </div> 
</div>

而且你的CSS3應該是：

#hor-box{ 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 

-moz-box-orient: horizontal; 
box-orient: horizontal; 
-webkit-box-orient: horizontal; 

} 
#left { 
     width:200px; 
     background-color:antiquewhite; 
     margin-left:10px; 

    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 
} 
#content { 
     min-width:700px; 
     margin-left:10px; 
     background-color:AppWorkspace; 

    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
     box-flex: 1; 
}

來源

2013-01-14 13:38:07

這對CSS3支持的瀏覽器來說非常棒。 – Maysam

#wrapper 
{ 
    min-width:960px; 
    margin-left:auto; 
    margin-right:auto; 
    position-relative; 
} 
#left 
{ 
    width:200px; 
    position: absolute; 
    background-color:antiquewhite; 
    margin-left:10px; 
    z-index: 2; 
} 
#content 
{ 
    padding-left:210px; 
    width:100%; 
    background-color:AppWorkspace; 
    position: relative; 
    z-index: 1; 
}

如果您需要的#left右邊的空格，然後在#content

添加 border-right: 10px solid #FFF;到 #left並添加 10px到 padding-left

來源

2014-06-03 00:56:28

CSS：自動調整div以適合容器寬度

回答

相關問題