正文 

当前位置： 首页 > 知识 >

使多个浮动 div 彼此相邻居中

     2023-03-05     79

关键词：

【中文标题】使多个浮动 div 彼此相邻居中【英文标题】：Center multiple floating divs next to each other 【发布时间】：2013-08-30 20:43:04 【问题描述】：

我应该让 3 个divs 并排坐下。所以我创建了一个div 并放入了三个divs，使用这种css 样式：

div.holder div 
  float: left;
  width: 250px;
  background-color: yellow;   

  /*margin-right:auto;  /**These did not help**/
  margin-left:auto;  */

像这样的html：

<div class="holder">
  <div></div>
  <div></div>
  <div></div>
</div>

它应该看起来像这样： 相反，它看起来像这样：

边框divs 应与灰线末端对齐。

【问题讨论】：

如果你想让你的“gold div”贴在右边，那就让​​它float: right。 @Brewal 这是个好主意。现在，如果您知道一种将银色放在中间的方法，那我就完成了。也许我会试试margin:auto。 以下线程正是您要查找的内容Fluid width with equally spaced DIVs 哦 - 对不起，我找不到要搜索的正确查询。 【参考方案1】：

您正在为宽度指定一个像素值。无论您对浮点数做什么，这些像素值都是固定的，永远不会到达边框的末端。您可以将宽度设置为一个百分比，例如width: 33%;。你也可以设置你的左右边距来隔开你的 div，比如margin: 0 20px;。

在这些情况下，我通常会做的是将我的元素包装在一个 div 中，并使用该 div 来定位元素。然后，我将用于背景颜色、文本颜色等的内部容器。类似的东西可能对你有用：

<div class="holder">
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
</div>

还有 CSS：

.wrapper 
    float:left;
    width:33%;

.container 
    background-color: yellow;
    margin: 10px;
    padding: 20px;

这是一个小提琴：http://jsfiddle.net/bWFS8/

【讨论】：

【参考方案2】：

这就是我想要 div 彼此相邻时使用的方法：

CSS：

#menuitem 
font-weight:bold;
border-right-style:solid;
font-size:10.7px;
border-right-width:1px;
border-left-width:1px;
height:30px;
position:relative;


#menuitem span 
position:absolute;
text-align: center;


#menubar 
margin-top:10px;
position:absolute;
left:0px;
font-family:Verdana, Geneva, sans-serif;

HTML：

<div id="menubar">
<div style="float:left;width:104px;border-left-style:solid;" id="menuitem"><span style="bottom:9px;width:104px;">Menu Item 1</span></div>
<div style="float:left;overflow:hidden;width:78px;" id="menuitem"><span style="bottom:7px;width:78px;">Menu Item 2</span></div>
<div style="float:left;overflow:hidden;width:100px;" id="menuitem"><span style="bottom:9px;width:100px;">Menu Item 3</span></div>
</div>

希望我能帮上忙。

【讨论】：

【参考方案3】：

如果您要让它们全部水平对齐，那么您真的应该使用无序列表样式来显示带有zoom:1 和display:inline 的内联块。

没有理由使用浮动来将它们并排放置。

【讨论】：

使弹性项目彼此相邻堆叠

】使弹性项目彼此相邻堆叠【英文标题】：Makeflexitemsstacknexttoeachother【发布时间】：2018-04-1514:03:54【问题描述】：我有10个div：2个隐藏，8个堆叠在一起。使用媒体查询，在调整屏幕大小时，我可以显示2个隐藏的div。所以，现在... 查看详情

如何使浮动在多条线上的多个图像居中？

】如何使浮动在多条线上的多个图像居中？【英文标题】：HowcanIcentremultipleimagesthatarefloatedacrossmorethanoneline?【发布时间】：2015-08-2605:13:25【问题描述】：我正在使用引导程序并且有一个div是“col-md-8col-md-offset-2”，它位于页面的... 查看详情

如何在不指定宽度的情况下使两个 DIV 相邻浮动？

】如何在不指定宽度的情况下使两个DIV相邻浮动？【英文标题】：HowtofloattwoDIVsnexttoeachotherwithoutspecifyingwidth?【发布时间】：2014-05-3022:12:10【问题描述】：我试图将两个DIV向左浮动，最左边的DIV具有设定的宽度，最右边的DIV占据... 查看详情

如何使用 CSS 使 1 个 div 居中对齐和其他浮动正确 [重复]

】如何使用CSS使1个div居中对齐和其他浮动正确[重复]【英文标题】：Howtomake1divcentrealignandotherfloatrightusingCSS[duplicate]【发布时间】：2017-09-1319:57:03【问题描述】：我想让我的div2居中对齐，div3居中。我尝试使用textalign:centerformaindiv... 查看详情

如何使用浮动使 DIV 居中：左；在引导程序 3 中？

】如何使用浮动使DIV居中：左；在引导程序3中？【英文标题】：HowtocenterDIVswithfloat:left;inBootstrap3?【发布时间】：2014-01-3106:45:28【问题描述】：我已经和这些东西斗争了一段时间，但无法弄清楚：<divclass="container"><div><... 查看详情

液体布局中的多个居中浮动 div

】液体布局中的多个居中浮动div【英文标题】：Multiplecenteredfloatingdivsinaliquidlayout【发布时间】：2011-04-2405:24:21【问题描述】：我有一个我想使用的布局的想法，但我无法让它正常工作。由于我花了几个小时搜索，我希望这里的... 查看详情

响应式将多个视频彼此相邻并在彼此下方嵌入

】响应式将多个视频彼此相邻并在彼此下方嵌入【英文标题】：responsiveembedmultiplevideosnexttoeachotherandundereachother【发布时间】：2018-11-1320:08:21【问题描述】：我正在尝试将多个Vimeo视频响应式地嵌入到彼此旁边和下方。当我使用嵌... 查看详情

当我将它们的元素设置为彼此堆叠（块）时，为啥我的 flex-box 元素会“浮动”彼此相邻？

...元素设置为彼此堆叠（块）时，为啥我的flex-box元素会“浮动”彼此相邻？【英文标题】：Whydomyflex-boxelements"float"nexttoeachotherwhenI\'vesettheirelementstostackontopofeachother(block)?当我将它们的元素设置为彼此堆叠（块）时，为什么... 查看详情

将一组浮动 div 居中

】将一组浮动div居中【英文标题】：centreagroupoffloateddivs【发布时间】：2014-09-1913:27:32【问题描述】：我正在尝试使一组浮动div居中。HTML<divclass="wrapper"><divclass="parent"><divclass="child"></div><divclass="child"></div&g... 查看详情

有多个相邻的 div

】有多个相邻的div【英文标题】：Havemultipledivsnexttoeachother【发布时间】：2015-02-1618:44:20【问题描述】：基本上，我想制作一个“色谱”，其中我有多个彼此相邻的单独彩色div，每个都有指向不同站点的链接。到目前为止，我有... 查看详情

使图像和段落彼此相邻

】使图像和段落彼此相邻【英文标题】：makeanimageandaparagraphsitnexttoeachother【发布时间】：2011-03-0800:12:41【问题描述】：我有一个带有图像和一些txt的盒子，我希望txt与图像水平。我知道这可能是一个非常简单的问题，但我似乎无... 查看详情

在向左浮动的 div 中垂直居中图像

】在向左浮动的div中垂直居中图像【英文标题】：CenterImageVerticallyWithinDivThatIsFloatedLeft【发布时间】：2014-05-0206:06:21【问题描述】：这适用于移动网站标题。页面标题居中，后退按钮图像向左浮动。我希望后退按钮在pageTitlediv中... 查看详情

Mailchimp 代码使两个按钮彼此相邻

】Mailchimp代码使两个按钮彼此相邻【英文标题】：Mailchimpcodetomaketwobuttonnexttoeachother【发布时间】：2018-06-2006:49:40【问题描述】：我在代码方面不是最擅长的，所以很想得到帮助。在做了一些研究之后，我使用他们的代码选项在Ma... 查看详情

位置 2 div 彼此相邻

】位置2div彼此相邻【英文标题】：position2divsnexttoeachother【发布时间】：2015-10-1611:17:11【问题描述】：我的div在下面的html中，<divclass="mainBlock"><divstyle="display:inline-block"><span>ThisText-1maybeabitlengthy</span></div& 查看详情

使用自动布局使 UILabel 和 UITextField 彼此相邻

】使用自动布局使UILabel和UITextField彼此相邻【英文标题】：UsingAutoLayouttohaveUILabelandUITextFieldnexttoeachother【发布时间】：2013-09-1709:25:34【问题描述】：我正在尝试将UILabel实例标签放置在UITextField实例文本字段旁边，就像在iOS设置对... 查看详情

如何使这两个元素彼此相邻

】如何使这两个元素彼此相邻【英文标题】：Howtokeepthesetwoelementsnexttoeachother【发布时间】：2013-03-1622:10:09【问题描述】：所以早些时候我正在编写我的网站联系表单，我想制作它，所以我不得不选择返回或发送。但我注意到他... 查看详情

浮动底部 - 彼此顶部

】浮动底部-彼此顶部【英文标题】：Floatbottom-topofeachother【发布时间】：2013-07-2208:57:20【问题描述】：大家好，我想就css-jquery拖放问题寻求帮助。我熟悉将div定位到其容器的底部（位置：相对->位置：绝对；底部：0；）。目... 查看详情

输入按钮彼此相邻，一个表单一个新页面

】输入按钮彼此相邻，一个表单一个新页面【英文标题】：inputbuttonsnexttoeachother,oneformonenewpage【发布时间】：2018-01-0600:40:16【问题描述】：我想要两个按钮，一个提交数据，另一个返回到其他页面，居中并彼此相邻。我可以居中... 查看详情