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

将div居中在向右浮动的div和向左浮动的div之间

林礼骞
2023-03-14
问题内容

我有一个页面,其中页眉由三个div组成-一个浮动在左侧,一个浮动在右侧,以及一个在它们之间。我希望该中心div居中,但遗憾的float: center是不存在,我不能只是将其浮动到左侧并添加填充,因为它必须根据窗口大小进行更改。

有什么简单的我可以忽略的吗?还是我会怎么做?

更新:
此外,我想找到一种方法将中间div居中于div 之间的空间 中,以防看起来更好。


问题答案:

如果您有两个浮动div,那么您知道边距。问题是float:rightdiv应该放在中间div之前。因此,基本上您将拥有:

左浮| 右浮| 居中

现在,讨论一下边距:通常您可以使用margin:0auto,对吗?问题是,现在您知道边距的值:浮动div!因此,您只需要使用:

margin:0 right-floated-width 0 left-floated-width

那应该工作。

多年以后

同时,一个新的玩具出现了:flexbox。支持[相当不错](即,如果您不需要支持低于IE10的支持),并且易用性超过了浮动。

您可以在这里看到一个非常好的flexbox指南。您需要的示例就在这里



 类似资料:
  • 我正试图将列表设置为在div中向右浮动,但这不起作用。下面是html代码, 这是我正在努力使它工作的css 编辑:我的意图是将标题文本(MakeItWork)保持在页面的左侧,而列表(包含home、content和shop作为列表项)保持在页面的右侧

  • 问题内容: 假设您有一个,给它一个定值,然后在其中添加元素,在我的情况下为另一个。 这个想法是容器的内容将导致容器伸展,并成为内容的背景。但是,当我这样做时,包含的对象会缩小以适合非漂浮的对象,并且漂浮的对象将要么全部伸出,要么一半伸出,一半进入,并且对big的大小没有任何影响。 为什么是这样?有什么我想念的东西,怎么才能让漂浮的物品伸出其中的东西呢? 问题答案: 最简单的方法是放在父div上,而

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

  • 问题内容: 我搜索了其他问题,尽管这个问题似乎与其他几个问题相似,但到目前为止,我所看到的任何问题似乎都无法解决我遇到的问题。 我有一个div,其中包含许多其他div,每个div都向左浮动。这些div分别包含照片和标题。我要的是使照片组位于包含div的中心。 从下面的代码中可以看到,我已经尝试在父div上同时使用和,并且还在照片后添加了(如另一个主题中所述)。似乎没有什么改变。 谢谢。我感谢任何建

  • 当用户滚动内容时,我试图添加一个浮动div,它几乎可以工作,但在动画上几乎没有延迟,我需要当scrollTop到达浮动div时,浮动div应该与滚动一起动画 小提琴连杆