如何让图片和文字分列两边设定css

html-css0108

如何让图片和文字分列两边设定css,第1张

、在div中，使用p标签创建一行文字，使用img创建一张图片。

2、设置div标签的class属性为mydiv。

3、在css标签内，通过class设置div的样式，设置它的宽度为400px，边框为1px，并将display属性设置为flex，实现flex布局。

4、在css标签内，将align-items属性设置为center(水平居中)，将justify-content属性设置为space-between（两端对齐）。

5、在浏览器打开test.html文件，查看实现的效果。

如果你想分2列：

.left1{width:100pxfloat:left}

.right1{margin-left100px}

如果你想分3列的：

.left2{width:100pxfloat:left}

.right2{width:100pxfloat:right}

.center2{margin-left:100pxmargin-right:100px}

距离你自己改变，大概也是这么一个结构

1.设置一个外部div，并且这个外部div两边清除浮动，然后通过设置外边距来达到这个外部div剧中。

例如

div.outDiv { width:960pxheight:autoclear:bothmargin:10x auto}

这就达到了外部div剧中显示的目的。设置了宽度，那么不伦浏览器怎么变化，外部div是不会变形的。

2.如果有浮动的情况下。尤其是一个外部div，里面内嵌了很多float的div，那么这时候要注意，将外部div设置为overflow:hiddenzoom:1（溢出隐藏）

3.还有如果一个外部div里面只有两个浮动div的话，可以讲两个div分别设置为左右浮动。