<!-- 图文混排 -->
    <div class="picAndWord">

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

        <div class="para">
            <h2>Library</h2>
            <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            <p class="p2">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="button">EXPLORE</p>
        </div>

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

        <div class="para">
            <h2>Library</h2>
            <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            <p class="p2">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="button">EXPLORE</p>
        </div>
        <div class="para">
            <h2>Library</h2>
            <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            <p class="p2">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="button">EXPLORE</p>

        </div>

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

        <div class="para">
            <h2>Library</h2>
            <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            <p class="p2">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="button">EXPLORE</p>
        </div>

        <img class="img" src="./images/b4.jpg" alt="">
    </div>

​.picAndWord{
    width: 100%;
    height: 760px;
    /* background-color: yellowgreen; */
}

.picAndWord .img.img{
    width: 25%;
    float: left;
    height: 380px;
    display: block;
}

.picAndWord .para{
    width: 25%;
    float: left;
    height: 380px;
    background-color: turquoise;

}

.picAndWord .para h2{
    font-size: 24px;
    margin: 20px 20px 30px;
    color:white;
}

.picAndWord .para .p1{
    font-size: 16px;
    margin: 0 0 20px 20px;
    color: white;
}

.picAndWord .para .p2{
    font-size: 14px;
    color: gray;
    margin-left: 20px;
}

.picAndWord .para .button{
    display: block;
    width: 138px;
    height: 40px;
    margin: 30px auto 0;
    background-color: black;
    color: white;
    line-height: 40px;
    text-align: center;
}