Question

除了nav元素之外，我还放置了section。关于同一主题有多个问题（例如here，here，here）。所以一般来说我明白该怎么做：

以下样式表有效，但缺点。只要section元素不再消耗80% width，它就会低于nav元素。

nav { vertical-align: top; display: inline-block; }
section { position: relative; float: right; width: 80%; display: inline-block; vertical-align: top; padding: 0; }
........
<nav>Nav, left</nav><section>content, right</content>

我真正希望实现的是左侧nav，右侧section消耗剩余（！）空间。这是我尝试过的：

section的宽度不起作用
仅授予nav width不起作用。我试图在width上设置固定nav，section
减少width（例如降低到60％）对于较小的屏幕效果更好，但在更宽的屏幕上浪费了大量空间。备注：80％是某种妥协。

那么如何设置section消耗右侧剩余空间（全部）的css？

Answer 1

您需要在这种情况下使用定位。这是一个案例：

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

或者

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

固定流体模型。在我的片段中，我演示了两种示例。在第一种情况下，流体的尺寸较小。接下来的内容太长了。

<强>段

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

css，nav除了最大宽度的部分

1 个答案: