Question

我有一个带有容器div的页面，这个容器div有两列，都是内联块。一列（左侧（LHS））是购物目录的ticbox选择，右列是所选选择的输出。

我遇到的问题是每个都根据父宽度的百分比分配宽度，左边 - 固定列是20％宽度，右边是输出列宽度是79％（我倾向于允许1％的变化）。但是：左列需要最小宽度 - 以px定义为155px; 右侧（RHS）列填充了目录搜索显示的每个产品的内联块。这些块是固定宽度（140px）

我的问题：当页面加载到我的屏幕上时没关系，但是：

LHS：最小宽度：155px＆lt;宽度：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;
}

[Some] ATTEMPTED FIXES（不按尝试顺序）：

1）Calc使最大宽度始终小于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 for FFFFFFFF SAKE - 我刚刚写完这篇文章，虽然我一直在写这篇文章，但是一直在尝试不同的想法，因为它们已经发生并终于奏效了：

现在，在完成所有这些努力之后，我想发布它，但解决方案在下面!!!

Answer 1

OH for FFFFFFFF SAKE - 我刚刚写完了这些内容，虽然我一直在写这篇文章，但他们一直在尝试不同的想法，并且它们终于奏效了：

出于某种原因，我的计算方法适用于：

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

任何想法为什么会这样，正如我所说，在容器div标准宽度内是百分比，并且在RHS内部的产品容器（内联块）中有一些填充，但这真的不应该影响必须添加更多＆＃34;填充＆＃34;计算方法中的空间。

无论如何，它现在有效。我很高兴。也许这会对某人有所帮助？

Answer 2

使用内联块，您将在布局中占用一些空格。

在800px的容器div中，两个宽度为400px的内联块div不会总是彼此相邻。

您可以通过确保元素的结束标记直接位于HTML中下一个元素的开始标记旁边来解决此问题（例如</div><div>，无新行或空格）。

更好的选择是将font-size: 0应用于包含元素，然后将font-size重置为例如1rem用于内联块元素。

CSS内联块宽度问题

2 个答案: