当前位置: 首页 > 面试题库 >

如何在另一个div内对齐3个div(左/中/右)?

江佐
2023-03-14
问题内容

我想在容器div中对齐3个div,如下所示:

[[LEFT]       [CENTER]        [RIGHT]]

容器div的宽度为100%(未设置宽度),调整容器大小后,居中div应保持居中。

所以我设置:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

但它变成:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

有小费吗?


问题答案:

使用该CSS,将您的div放置为这样(浮点数优先):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS 您也可以向右浮动,然后向左浮动,然后居中。重要的是浮子位于“主”中心部分之前。

PPS 您通常希望在#container此代码片段的最后:该代码片段<div style="clear:both;"></div>#container垂直延伸以包含两个侧面浮标,而不是仅从#center其底部开始占据高度,并可能使侧面从底部突出。



 类似资料:
  • 各位早上好,我正在创建一个产品销售系统,这个话题会有点长,因为我想好好解释一下。 正在用Vaadin+MySQL+springboot+Maven开发的系统 在主屏幕上,我们有一个网格,上面有“新建”、“更改”和“删除”按钮: 当点击new按钮时,将打开一个窗口,开始“销售”产品: 这里的问题是这样的,当我点击“+项”时会出现以下情况: 问题:创建了一个滚动条(在窗口的右边),保存、关闭和+项按钮

  • 问题内容: 我想将居中。但是,事实并非如此。我只想找出原因以及如何使其居中。 问题答案: 您需要设置容器的宽度。(不起作用) MDN的CSS参考说明了这一切。

  • 问题内容: 在将一个人叠加到另一个人上时,我需要帮助。 我的代码如下所示: 不幸的是,我不能将或嵌套在第一个内部。 如图所示,它必须是两个单独的,但是我需要知道如何将放置在上方和最右侧,并以的顶部为中心。 问题答案: 我建议使用来了解和子元素。

  • 我有一个带有类属性。我无法改变这一点。 我试图在它的右边浮动一个较小的div,但是,它总是出现在父div的下面。我必须如何标记CSS?

  • 问题内容: 我需要将两个div彼此对齐,以便每个都包含一个标题和一个项目列表,类似于: 使用表非常容易,但是我不想使用表。我该如何实现? 问题答案: 将div浮动到父容器中,并设置其样式如下:

  • 问题内容: 我有一个小问题。我正在尝试使用CSS并排对齐两个div,但是,我希望将中心div放置在页面的水平中央,我通过使用以下方法实现了这一点: 很好 我想将第二个div放置在中心页面换行的左侧,但是尽管可以确定,但我无法使用浮点数来完成此操作。 我想将红色div推向白色div。 这是我当前关于这两个div的CSS,侧边栏是红色div,页面换行是白色div: 问题答案: 如果包裹了div,如下所