图文布局的效果

图文布局的代码

常见的图文布局

.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_right {

width: 54%;

height: 100%;

float: right;

}

/* 左文右图布局 */

.con2_item {

width: 48%;

height: 180px;

margin: 10px 1%;

float: left;

background-color: #f1f1f1;

border-radius: 10px;

}

.con2_item:hover {

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

}

.con2_item_left {

width: 54%;

height: 100%;

float: left;

}

.con2_item_right {

width: 44%;

height: 100%;

float: right;

}

.con2_item_right>img {

width: 100%;

height: 100%;

border-radius: 10px;

}

/* 上图下文布局 */

.con3_item {

width: 48%;

height: 180px;

margin: 10px 1%;

float: left;

background-color: #f1f1f1;

border-radius: 10px;

}

.con3_item:hover {

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

}

.con3_item_top {

width: 100%;

height: 75%;

}

.con3_item_top>img {

width: 100%;

height: 100%;

border-radius: 10px;

}

.con3_item_bottom {

width: 95%;

height: 25%;

line-height: 45px;

margin: 0 2.5%;

}

/* 上文下图布局 */

.con4_item {

width: 48%;

height: 180px;

margin: 10px 1%;

float: left;

background-color: #f1f1f1;

border-radius: 10px;

}

.con4_item:hover {

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

}

.con4_item_top {

width: 95%;

height: 25%;

line-height: 45px;

margin: 0 2.5%;

}

.con4_item_bottom {

width: 100%;

height: 75%;

}

.con4_item_bottom>img {

width: 100%;

height: 100%;

border-radius: 10px;

}

声明：所有的图片只用于学习、不用做任何商业用途。如有侵权，请告知，立马删除。

原文：https://www.cnblogs.com/laowenBlog/p/12622671.html