CSS內聯塊寬度問題

Question

我有一個包含容器div的頁面，該容器div有兩列，均為內聯塊。 一欄（左側（LHS））是購物目錄的ticbox選擇，右欄是所選選擇的輸出。

我的問題是，根據父級寬度的百分比分配了每個寬度，左固定列為20％寬度，右輸出列為79％寬度（我傾向於允許1％的可變性）。 但是：左列需要最小寬度-以px為155px定義； 右側（RHS）列填充有目錄搜索所顯示的每種產品的內聯塊。 這些塊是固定寬度（140像素）

我的問題：頁面加載到我的屏幕上就可以了，但是在以下情況下：

LHS：最小寬度：155像素<寬度：20％

（已調整瀏覽器窗口的大小）

整個右側下降到左側含量以下（因為其寬度小於所需的79％）。

一些簡單的示例：請注意，在測量寬度時，不考慮邊框或填充。

HTML：

<div id="container">
    <div class="leftsideMenu">Menu column.</div>
    <div class="rightsideShop">Shop Contents</div>
</div> 

CSS：

#container{
    width:80% /* of screen */
    min-width:555px; /*should leave 400px for shop contents */
}

.leftsideMenu {
    display:inline-block;
    width:20%;
    min-width:155px;
    vertical-align:top;
}

.rightsideShop{
    display:inline-block;
    width:79%;
    max-width:calc(100% - 156px) !important; /* fix attempt - doesn't appear to work */
    vertical-align:top;
}

[某些]嘗試修復（不按嘗試順序）：

1）計算以使最大寬度始終小於100％-155，似乎不起作用

2）浮動和邊距：這確實有效，但存在布局問題，即客戶不希望在LHS列下方穿鞋，而浮動高度= 100％父級是另一個問題，

3）我也嘗試過使用https://stackoverflow.com/a/6350781/3536236來回答類似的問題-具有相對RHS和使用強制LHS余量的方法，但這不能作為解決方案在這種情況下，鏈接到此處對我不起作用。

4）我認為flex-box風格的工作可能是最好的方法，但是我對此還不夠了解，老實說，我希望避免對頁面CSS的大量修改。 （我原本希望這個問題是30分鍾！）。

5）為RHS設置沒有寬度（只是最大寬度）-為自動定義的寬度，該寬度自動定義為100％，位於左側欄的下方。

我認為答案很簡單，但我看不到:(。

為了解釋以上幾點，LHS最初是一個浮動控件，可以正常工作，但是客戶不希望在LHS列的菜單下方顯示任何產品，所以我想-啊，很簡單，將其設置為內聯塊。

關於保持右手邊給左手邊所需的空間，即使在調整屏幕大小時，是否有任何幫助？

............

OH FFFFFFFF SAKE-我剛剛將所有內容全部寫下來，而在我撰寫本文時，他們一直在嘗試不同的想法，因為它們已經出現，並且最終成功了：

經過所有這些努力，我還是想將其發布，但是解決方案在下面！！！

Answer 1

OH FFFFFFFF SAKE-我剛剛將所有內容全部寫下來，而在我撰寫本文時，他們一直在嘗試不同的想法，因為它們已經出現，並且最終成功了：

由於某些原因，我的calc適用於：

 max-width:calc(100% - 160px); Giving a spare space of 5px . 

正如我說的，為什么這樣，在容器div中，標准寬度都是百分比，並且RHS內的產品容器（內聯塊）有一些填充，但這真的不應該影響添加更多的“ calc方法中的“ padding”空格。

無論如何，現在就可以使用。 我很高興。 也許這會幫助某人？

Answer 2

使用內聯塊，您將有一些空格占用布局中的一些空間。

在800像素的容器div中，寬度為400像素的兩個內聯塊div不會始終彼此相鄰渲染。

您可以通過確保元素的結束標記緊鄰HTML中下一個元素的開始標記（例如</div><div> ，不包含換行符或空格）來解決此問題。

更好的選擇是將font-size: 0應用於包含的元素，然后將inline-block元素的font-size重置為例如1rem 。