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

html-css021

如何让图片和文字分列两边设定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文件，查看实现的效果。

给标题的盒子编一定义float:left

然后限定标题盒子的父级盒子的width为单独标题的盒子的width的2倍多点.它就自然变成两列显示了.

<div id="parent">

<div class="menu">标题一</div>

<div class="menu">标题二</div>

.......................

<div class="menu">标题N</div>

</div>

CSS中类似这样写

#parent{

width:320px

height:200px

}

.menu{

width:150px

height:20px

float:left

}

如果你想分2列：

.left1{width:100pxfloat:left}

.right1{margin-left100px}

如果你想分3列的：

.left2{width:100pxfloat:left}

.right2{width:100pxfloat:right}

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

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