/*图文混排区域*/

.image-text{

width: 100%;

height: 760px;

overflow: hidden;

margin-top: 30px;

}

.image-text .image,.image-text .text{

width: 25%;

height: 380px;

float: left;

}

.image-text .image img{

width: 100%;

height: 380px;

}

.image-text .text{

background-color: #07CBC9;

height: 380px;

width: 25%;

}

.image-text .text div{

padding:20px;

}

.image-text .text .text1{

padding-bottom: 30px;

font-size: 24px;

color: white;

}

.image-text .text .text2{

padding-bottom: 20px;

font-size: 16px;

color: white;

}

.image-text .text .text3{

padding-bottom: 30px;

font-size: 14px;

color: gray;

}

.image-text .text .text4{

width: 138px;

height: 40px;

margin: 0 auto;

background-color: black;

color: white;

text-align: center;

line-height: 40px;

}

.image-text .image{

position: relative;

}

.image-text .image .before{

width: 0;

height: 0;

border: 20px solid transparent;

border-right-color: #07CBC9;

position: absolute;

top: 50%;

right: 0;

margin-top: -20px;

}

.image-text .image .after{

width: 0;

height: 0;

border: 20px solid transparent;

border-left-color: #07CBC9;

position: absolute;

top: 50%;

left: 0;

margin-top: -20px;

}

    <!-- 图文混排区域 -->

    <div class="image-text">

        <div class="image">

        <div class="before"></div>

            <img src="images/b1.jpg">

        </div>

        <div class="text">

        <div>

            <p class="text1">Library</p>

            <p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

            <p class="text3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

            <p class="text4">EXPLORE</p>

            </div>

        </div>

        <div class="image">

        <div class="before"></div>

            <img src="images/b2.jpg">

        </div>

        <div class="text">

            <div>

            <p class="text1">Library</p>

            <p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

            <p class="text3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

            <p class="text4">EXPLORE</p>

            </div>

        </div>

        <div class="text">

            <div>

            <p class="text1">Library</p>

            <p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

            <p class="text3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

            <p class="text4">EXPLORE</p>

            </div>

        </div>

        <div class="image">

        <div class="after"></div>

            <img src="images/b3.jpg">

        </div>

        <div class="text">

            <div>

            <p class="text1">Library</p>

            <p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

            <p class="text3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

            <p class="text4">EXPLORE</p>

            </div>

        </div>

        <div class="image">

        <div class="after"></div>

            <img src="images/b4.jpg">

        </div>

    </div>

​