时间戳

首页 > 解决方案 > 一行两个div，但是一个div是固定大小的，怎么办？

html - 一行两个div，但是一个div是固定大小的，怎么办？

问题描述

对不起，我会说一点英语。我想在一行中看到左右 div。

HTML：

<div id="header">header</div>
<div id="container">
 <div id="left"></div>
 <div id="right"></div>
</div>
<div id="footer">footer</div>

CSS：

#container { max-width: 1700px; }
 #left { width: 100%-314px; }
 #right { width: 314px; }

如果没有#right div，我想工作。看：

HTML (2):

<div id="header">header</div>
<div id="container">
 <div id="left"></div>
</div>
<div id="footer">footer</div>

如何？

标签： htmlcss

解决方案

这应该适合你！

#container {
 max-width: 1700px;
 display: flex;
 }
 #left {
 width: calc(100% - 314px);
 }
 #right {
 width: 314px;
 }

代码解释：

display:flex：flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间。

calc(100%-314px) : calc() 函数执行可用于属性的计算。

我希望这对你有帮助！

推荐阅读