如何管理CSS佈局依賴關係？

此問題：CSS: how to get two floating divs inside another div 顯示瞭如何在固定寬度的右側獲取可變寬度框。如何管理CSS佈局依賴關係？

然而，我們必須

#left_menu { 
    width: 150px; 
    float: left; 
} 

#content { 
    margin-left: 170px; /* must be kept as left_menu.width+20 */ 
    border: 1px solid white; 
}

如果我們改變left_menu的寬度，而忘記了保證金左應該是這個+20，事情就壞了。

在CSS中跟蹤這些佈局依賴關係的最佳做法是什麼？

來源

2014-01-22 user48956

假設你可以使用預處理像SASS或更少，那麼你可以使用變量，做你的計算有 – wickywills

（可能）最好的解決方案是使用CSS預處理器，如SASS。你可以做一個非常簡單的變量賦值和計算，例如：

$leftMenuWidth: 150px; 

#left_menu { 
    width: $leftMenuWidth; 
    float: left; 
} 

#content { 
    margin-left: $leftMenuWidth + 20; /* must be kept as left_menu.width+20 */ 
    border: 1px solid white; 
}

CSS calc()大有前途，但它不是你希望做的相當的。

另一種解決方案，取決於您對瀏覽器的兼容性要求是flexbox。您可以將固定寬度+流體寬度元素混合在一起，並讓瀏覽器爲您計算佈局。 Flexbox也可以做得更多，但這是另一個問題。閱讀我在CSS技巧上鍊接的指南，以獲得良好的概述。

來源

2014-01-22 17:15:46 dmackerman

相反，#content元素上使用margin的，你可以添加overflow-x: hidden;到內容和浮動元素上設置margin-right。

#left_menu { 
    width: 150px; 
    float: left; 
    margin-right: 20px; /* <-- push the content to the right */ 
    background-color: orange; 
} 

#content { 
    overflow-x: hidden; /* <-- prevent from wrapping */ 
    background-color: gold; 
}

JSBin Demo

來源

2014-01-22 17:22:16

如何管理CSS佈局依賴關係？

回答

相關問題