如果不采用float，不妨考虑Flex布局
这几种布局都可以简单实现，换行的话也是一行代码即可，如下图
以下是一个简单的flex布局：
<!--思路：让原本每个子div都占据一行的变成五个一共占一行，在不使用float的情况下，使用flex去实现--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.content{ display:-webkit-flex display:flex} /*Flex布局*/
/*注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
</style>
<body>
<!--设置若干个div，content下的div在flex 的作用下，都会往左浮动-->
<div class="content"> <!--设置类名-->
<div>1</div><!--设置5个div-->
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
HTML中表格、文字、图像等元素都有使用到align属性，align属性主要是影响设置元素的水平对齐方式，给表格、文字、及图像等元素设置align属性，其表现形式是不一致的。
通过测试我们发现，对于表格元素table、tr、td、th都是可以有效设置align属性的，设置的效果是使得各表格元素内的内容（一般为文本，也可以是图片等）水平偏移。
通过简单测试我们可以看出，我们给图片元素设置align属性时，当设置align属性值为left或者right时，图片左飘或右飘，当我们在图片后加上文字时，效果类似于左浮动或者右浮动，当然类似浮动效果的是，当align属性设置为center时，图片也无法漂浮到中间，我们可以利用这一特性来进行图文混排。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）