让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度相关的知识，希望对你有一定的参考价值。
我现在想让3个DIV并排，这个我知道用style:float,但是我还有一个要求就是，中间的一个DIV有固定宽度，比如1200px。高度无所谓，就100%，然后除去这个1200px所占的宽度，根据屏幕剩余的宽度，平均分配给剩下的2个DIV。效果相当于让中间的DIV居中，但是旁边的2个DIV要宽度一样。如何实现？
套table
<table width="100%"><tr>
<td><div style="width:100%; background:#0cf; height:700px;"></div></td>
<td style="width:1200px;"><div style="width:100%; background:#CCC; height:700px;"></div></td>
<td><div style="width:100%; background:#0cf; height:700px;"></div></td>
</tr>
</table>
你的答案非常接近了，但有缺陷的地方是表格有那种边框，就是白色的那种线，这个对我来说很致命，如果能去掉就好了。这种应该只有DIV之间的拼接才没有这种白线
追答html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, tdmargin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent
body
line-height:1
ol, ul
list-style:none
blockquote, q
quotes:none
blockquote:before, blockquote:after, q:before, q:after
content:'';
content:none
:focus
outline:0
ins
text-decoration:none
del
text-decoration:line-through
table
border-collapse:collapse;
border-spacing:0
.clear
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
把这个保存一个css。叫reset.css就可以，引用的时候放在最上面，你说的那个问题关键解决代码是
tableborder-collapse:collapse;
border-spacing:0
合并单元格，就不会有缝隙了，边线是默认没有的..
<div style="float:left;border:1px solid red;width:20%;height:100%;"></div>
<div style="width:60%;height:100%;margin:0 auto;float:left;border:1px solid red;"></div>
<div style="float:left;border:1px solid red;width:20%;height:100%;"></div>
</div>
要想用html+CSS就只能使用百分比了！追问
思路不错，但是我的要求是中间的DIV是固定长度，不是百分比呀
追答html暂时不能实现，要用js的！获取最外层的宽度，减去中间固定长度，除以2就是两边的宽度了！
参考技术B 这个要用到js来实现，获取当前屏幕的宽度，然后减去中间div的宽度再除以二就能得到边上div的宽度，个人建议用jquery来获取元素会方便一点，边上两个div用同样的class定义。 参考技术C用js来实现。
1；获取屏幕的宽度。
2；屏幕的宽度减去中间的宽度。
3；然后平均分配给左右两个DIV。
如何使用 CSS 并排浮动 3 个 div？
【中文标题】如何使用 CSS 并排浮动 3 个 div？【英文标题】：How to float 3 divs side by side using CSS? 【发布时间】：2021-12-18 01:38:17 【问题描述】：我知道如何让 2 个 div 并排浮动，只需将一个向左浮动，另一个向右浮动。
但是如何使用 3 个 div 来做到这一点，或者我应该为此目的使用表格吗？
【问题讨论】：
信息不足。层的宽度是多少？ 我会display: inline-block那些家伙，而不是让他们浮起来。如果它们的宽度总和小于容器宽度，它们将彼此相邻。
我推荐使用“display: table”。它是最可维护和最可靠的解决方案。见***.com/questions/14070787/…
【参考方案1】：
让他们全部离开
确保指定了一个宽度，它们都可以适合它们的容器（另一个 div 或窗口），否则它们会换行
【讨论】：
【参考方案2】：你可以浮动：所有这些都可以浮动并将宽度设置为 33.333%
【讨论】：
【参考方案3】：只需给它们一个宽度和float: left;，这是一个示例：
<div style="width: 500px;">
<div style="float: left; width: 200px;">Left Stuff</div>
<div style="float: left; width: 100px;">Middle Stuff</div>
<div style="float: left; width: 200px;">Right Stuff</div>
<br style="clear: left;" />
</div>
【讨论】：
如果您希望它们都随着页面的展开而展开怎么办？ @imray 只使用 % 而不是 px 您能否详细说明一下为什么要特别使用<br style="clear: left;" /> 与那种风格。
@MikedeKlerk 这是一个清除修复，以避免父崩溃。
正如@Nick Craver 解释的那样，您应该为所有元素赋予float: left 属性。发生这种情况是因为 float 属性指定元素如何沿其父容器的左侧或右侧放置。【参考方案4】：
这和你对两个 div 做的一样，只是把第三个也浮动到左边或右边。
<style>
.leftfloat:left; width:33%;
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
【讨论】：
但是 DIV 是块级元素，对吧？那么它们是如何并排放置而不是在下一行中的（因为块级元素以换行符开始和结束）。浮动对它也有其他影响吗？【参考方案5】：我通常只是将第一个浮动到左边，第二个浮动到右边。第三个会自动在它们之间对齐。
<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
【讨论】：
调整浏览器大小时不会造成混乱吗？【参考方案6】：<br style="clear: left;" />
有人在那里发布的代码，它成功了！！！ 当我在关闭容器 DIV 之前粘贴它时，它有助于清除所有后续 DIV 与我在顶部并排创建的 DIV 重叠！
<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!-- then magic trick comes here -->
<br style="clear: left;" />
</div>
太棒了！！ :)
【讨论】：
【参考方案7】：以下是我设法在 <footer> 元素中执行类似操作的方法：
<div class="content-wrapper">
<div style="float:left">
<p>© 2012 - @DateTime.Now.Year @Localization.ClientName</p>
</div>
<div style="float:right">
<p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
</div>
<div style="text-align:center;">
<p>☎ (24) 3347-3110 | (24) 8119-1085 ✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
</div>
</div>
CSS：
.content-wrapper
margin: 0 auto;
max-width: 1216px;
【讨论】：
【参考方案8】：尝试在样式中添加“显示：块”
<style>
.left
display: block;
float:left;
width:33%;
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
【讨论】：
【参考方案9】：<style>
.left-column
float:left;
width:30%;
background-color:red;
.right-column
float:right;
width:30%;
background-color:green;
.center-column
margin:auto;
width:30%;
background-color:blue;
</style>
<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>
这种方式的优点是您可以将每个列的宽度设置为彼此独立，只要您将其保持在 100% 以下，如果您使用 3 x 30%，则剩余的 10% 将被拆分为 5% 的分隔空间列
【讨论】：
【参考方案10】：@Leniel 这个方法很好，但你需要为所有浮动 div 添加宽度。我会说让它们等宽或指定固定宽度。类似的东西
.content-wrapper > div width:33.3%;
您可以为每个 div 分配类名，而不是添加 inline style，这不是一个好习惯。
请务必使用 clearfix div 或 clear div 以避免后续内容保留在这些 div 之下。
您可以找到有关如何使用 clearfix div here 的详细信息
【讨论】：
【参考方案11】：我更喜欢这种方法，旧版本的 IE 对浮点数的支持很差（真的吗？...）
.column-left position:absolute; left: 0px; width: 33.3%; background: red;
.column-rightposition:absolute; left:66.6%; width: 33.3%; background: green;
.column-center position:absolute; left:33.3%; width: 33.3%; background: yellow;
更新： 当然，要使用这种技术并且由于绝对定位，您需要将 div 包含在容器上并进行后处理以定义 if 的高度，如下所示：
jQuery(document).ready(function()
jQuery('.main').height( Math.max (
jQuery('.column-left').height(),
jQuery('.column-right').height(),
jQuery('.column-center').height())
);
);
这不是世界上最令人惊奇的事情，但至少不会在较旧的 IE 上崩溃。
【讨论】：
当然，要使用这种技术，并且由于绝对定位，您需要将 div 包含在容器上并进行后处理以定义 if 的高度，如下所示： jQuery(document).ready(function() jQuery('.main').height(Math.max(jQuery('.column-left').height(),jQuery(' .column-right').height(),jQuery('.column-center').height())); );这不是世界上最令人惊奇的事情，但至少不会在较旧的 IE 上崩溃。【参考方案12】：将所有三个 div 浮动到左侧。喜欢这里：
.first-div
width:370px;
height:150px;
float:left;
background-color:pink;
.second-div
width:370px;
height:150px;
float:left;
background-color:blue;
.third-div
width:370px;
height:150px;
float:left;
background-color:purple;
【讨论】：
重点是我的答案是最正确的，当一个新人在互联网上搜索这个 Q 时，他们会看到我的答案，这对他们最有帮助。 可能是这样。但它缺乏任何解释。可以在此站点上复制其他答案，将多个部分答案合并为一个更好的组合答案。您可以编辑并完成您的。但是新用户有一些限制（upvoting，很少链接），所以我仍然建议不要专注于旧的和已回答的问题。 @cfi 谢谢你，我会保留它以备将来参考。 这似乎重复了多年来存在的多个答案。【参考方案13】：但它在 Chrome 中有效吗？
浮动每个 div 并设置 clear；两者都用于行。如果您不想，则无需设置宽度。适用于 Chrome 41、Firefox 37、IE 11
Click for JS Fiddle
HTML
<div class="stack">
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
</div>
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
</div>
CSS
.stack .row
clear:both;
.stack .row .col
float:left;
border:1px solid;
【讨论】：
【参考方案14】：现代方式是使用CSS flexbox，见support tables。
.container
display: flex;
.container > div
flex: 1; /*grow*/
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>你也可以使用CSS grid，见support tables。
.container
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* fraction*/
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>【讨论】：
【参考方案15】：我没有看到引导答案，所以它有什么价值：
<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />
让 Bootstrap 算出百分比。 以防万一，我想清除两者。
【讨论】：
在 bootstrap 4 中，我认为你必须用 row 类将整个东西包装在一个 div 中。【参考方案16】：
display: table;如果文本需要出现好像在同一行
换句话说；如果每个<div> 中文本的垂直对齐方式需要相同，则可以尝试使用颇具争议的table 样式进行现代复古回归：
.container display: table;
div display: table-cell;
这被证明对格式化CSL-styled citations in Pandoc 非常有用，如下所示：
div.csl-bib-body
div.csl-entry
margin-top: 1rem;
display: table;
div.csl-left-margin
display: table-cell;
div.csl-right-inline
padding-left: 1ex;
display: table-cell;
引用编号div 和引用数据div 现在是shown at the exact same height。
【讨论】：
以上是关于让3个DIV并排，但是要让中间的DIV居中，旁边2个平均分配剩余宽度的主要内容，如果未能解决你的问题，请参考以下文章
CSS怎么设分别置大DIV里面的3个并排小DIV靠左 居中 靠右！