怎么回事呀？

Question

HTML部分：

<div class="content">

                <div class="hospital-1  f-l">

                    <img src="./file/hospital-1.jpg">

                </div>

                <div class="middle   f-l">

                    <p>地址333333333333vvvvvvvvvvvvvv</p>

                    <p>网址vvvvvvbbbbbb</p>

                    <p>电话fffffffffffffffffffff</p>

                    <p>路线：hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkknnnnnnnnnnnnnnnnnnnnnmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmggggggggggggggggggggggggggggggffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff fffffff

                    </p>

                </div>

                <div class="map-1  f-r">

                    <img src="./file/map-1.png">

                </div>

                <div class="clear"></div>

            </div>

CSS部分：

.content {

    padding-top: 10px;

}

.hospital-1 {

    width: 20%;

    display: inline-block;

}

.middle {

    width: 50%;

    display: inline-block;

    padding: 0 15px;

}

.map-1 {

    width: 30%;

    display: inline-block;

}

效果图是这样的：

Answer 1

添加强制换行       1、word-break: break-all;       只对英文起作用，以字母作为换行依据。       2、word-wrap: break-word;   只对英文起作用，以单词作为换行依据。       3、white-space: pre-wrap;     只对中文起作用，强制换行。