html左文右图布局方法,常见的图文布局

图文布局的效果

图文布局的代码

常见的图文布局

.all {

width: 900px;

margin: 0 auto;

}

.title {

float: left;

width: 100%;

background-color: yellowgreen;

height: 40px;

margin: 20px 0;

border-radius: 20px;

/*弹性盒子*/

display: flex;

flex-direction: row;

justify-content: left;

align-items: center;

}

.con {

width: 100%;

height: 200px;

float: left;

}

/* 左图右文布局 */

.con1_item {

width: 48%;

height: 180px;

margin: 10px 1%;

float: left;

background-color: #f1f1f1;

border-radius: 10px;

}

.con1_item:hover {

box-shadow: 6px 6px 6px #9D9D9D;

}

.con1_item_left {

width: 44%;

height: 100%;

float: left;

}

.con1_item_left>img {

width: 100%;

height: 100%;

border-radius: 10px;

}

.con1_item_