Question

我需要创建一个css 3列div布局，它是屏幕宽度的100％，其中左列为100px，右列为100px，中间列填充宽度的其余部分。中间div中的文本不得溢出。

我已经看过其他问题了，而且还没有能够提出这个解决方案。我该怎么做？

编辑：这就是我的工作。我错误地认为需要进一步解释这太微不足道了：

<div style="width: 100%; ">
    <div style="display: block; height: 20px; float: left;width:100px">
           Test1
    </div>
    <div style="display: block; margin-left: auto; margin-right: auto;">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div style="display: block; height: 20px;float:left;width:100px">
       Test3
    </div>
</div>

Answer 1

很简单。

使用 css calc（）并说中间是calc(100% - 200px)，只需添加overflow: hidden;

<强> 更新：

如果这不起作用，您可以制作宽度为 100vw或100％的主div。

然后让它成为position:relative; padding: 0 100px;，然后是主要的div和旁边的那些人：

左用：

position:absolute; top:0; left:0; width: 100px;

正确使用：

 position: absolute; top:0; right:0; width: 100px;

Answer 2

<div class="thing">
<div>thing</div>
<div>thing</div>
<div>thing</div>
</div>

div.thing {
display: grid;
grid-template-columns: 100px auto 100px;
justify-items: center;
}

div.thing:nth-child(1) {
    grid-column: 1;
}

div.thing:nth-child(2) {
    grid-column: 2;
}

div.thing:nth-child(3) {
    grid-column: 3;
}

https://codepen.io/fencepencil/pen/qojXQQ

Css 3列div布局，左右都是固定的，中间需要100％

2 个答案: