/* 图文混排区域 */

.picture-and-word {

    width: 100%;

    height: 760px;

}

.picture-and-word img {

    float: left;

    width: 25%;

    height: 380px;

    display:block;

}

.picture-and-word .word {

    float: left;

    width: 25%;

    height: 380px;

    background-color: #07cbc9;

}

.picture-and-word .word h3 {

    margin-top: 20px;

    margin-left: 20px;

    margin-bottom: 30px;

    font-size: 24px;

    color: white;

}

.picture-and-word .word .one {

    margin-left: 20px;

    font-size: 16px;

    color: white;

    margin-bottom: 20px;

}

.picture-and-word .word .two {

    margin-left: 20px;

    font-size: 14px;

    color: gray;

    margin-bottom: 30px;

}

.picture-and-word .word button {

    display: block;

    width: 138px;

    height: 40px;

    color: white;

    background-color: black;

    text-align: center;

    margin: 0 auto;

}

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

    <div class="picture-and-word">

        <div class="picture">

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

        </div>

        <div class="word">

            <p>

                <h3>Library</h3>

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

                <p class="two">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>

                <button>EXPLORE</button>

            </p>

        </div>

        <div class="picture">

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

        </div>

        <div class="word">

            <h3>Library</h3>

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

            <p class="two">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>

            <button>EXPLORE</button>

        </div>

        <div class="word">

            <h3>Library</h3>

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

            <p class="two">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>

            <button>EXPLORE</button>

        </div>

        <div class="picture">

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

        </div>

        <div class="word">

            <h3>Library</h3>

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

            <p class="two">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>

            <button>EXPLORE</button>

        </div>

        <div class="picture">

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

        </div>

    </div>

​