html/css如何让多个div标签水平排列？
介绍在html/css中使多个标签（比如div）水平排列的两种方法比较。分别是float: left和display: inline-block。
操作方法
- 01
首先如图所示，我在html中放置了两个iframe标签，没有额外设置。 如果直接浏览器打开，可以看到iframe标签默认就是横向排列的。
- 02
如果我将这两个iframe标签分别放在一个div标签里，可以看到div标签默认是竖着排列的，即一个div标签会占满一行。
- 03
第一种方法是，使用css同时设置这两个div标签的float为left。这样设置以后，这两个标签就是横向排列了。 但是要注意的是，后面这两个div后面的标签也在这一行继续排列了，因为使用float默认这两个div标签没有占据高度。
- 04
解决方法是，将两个div标签套在一个父级div标签，然后设置父级标签的overflow为hidden。
- 05
另一种使得div标签横排显示的办法是，设置他们的display样式为inline-block。
- 06
不过，不管是那种横向排列，当浏览器宽度过窄，都会自动折行，就好像竖着排列。
赞 (0)