Question

请查看图片和问题。您会看到p元素未满，但换行了。你能告诉我原因吗？非常感谢！

该代码由三个块组成，每个块具有三个文本描述。但是在第二个文本块中，当页面像素小于768px时，即使一行文本不完整，它仍然会折断该行。对？我查看了我的代码，但仍然不知道出了什么问题。我希望你能回答我的问题。谢谢

  
            .info{
                background-color: #ffffff;
                box-shadow: #aaa9a9 5px 3px 50px ;
                margin-top: 40px;
                border-radius: 15px;
            }
            .info1_1{
                height: 350px;
            }
            .info1_2{
                float: right;
                margin-top: 40px;
            }
            .info2_1{
                height: 450px;
            }
            .info3_1{
                height: 400px;
            }
            .info p{
                color: #eb6100;
                font-size: 20px;
                margin: 0 8%;
                padding-top: 10%;
             
            }
            .info_img{
                text-align: center;
                margin: 30px auto;
            }
            @media screen and (max-width: 768px){
                .info1,.info2,.info3{
                    width: 70%;
                    margin: 0 auto;
                }
                .col-sm-5,.col-sm-6{
                    float: none;

                }
            }
            @media screen and (max-width: 640px){
                .info1,.info2,.info3{
                    width: 90%;
                }
            }
            @media screen and (max-width: 500px){
                .info p{
                    font-size: 16px;
                }
            }

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale=1.0,user-scale=no" />
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <title>Hamiio technology--professional software and hardware customization</title>
        
    </head>
    <body>
    <header></header>
    <div class="body">
     
        <div class="about">
           
            <div class="row">
                <div class="col-lg-1 col-md-1 col-sm-1"></div>
                <div class="row col-lg-11 col-md-11">
                    <div class="info1 col-lg-6 col-md-6 col-sm-6">
                        <div class="info1_1 info">
                            <p>Hami technology, founded by shenzhen yicu innovation software co., LTD in 2010, is located in huizhou, guangdong, the beautiful founder of the former xunlei group of system architects, the company has a number of long-term software development professionals.</p>
                        </div>
                        <div class="info1_2 hidden-sm"><img src="paper.png"></div>
                    </div>
                    <div class="info2 col-lg-5 col-md-5 col-sm-5 ">
                        <div class="info2_1 info">
                            <p>The company's main business is: 1. Software customization development. 2.Customized development of software and hardware. Including system customization (Linux , Android , wince), software development.
                            </p>
                            <div class="info_img">
                                <img src="solution2.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 "></div>
                <div class="col-lg-8 col-md-8 col-sm-8  info3">
                    <div class="info info3_1">
                        <p>After more than 10 years of development experience, our project implementation team can more accurately make corresponding solutions according to the actual needs of customers. Hami team is a dedicated customer service team to give customers a perfect result.</p>
                        <div class="info_img">
                            <img src="img/solution1.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>**strong text**
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

Answer 1

我得到了答案！因为引导程序类“ hidden-sm”只会使元素的不透明度变为0。所以元素仍然占用空间。

p标记在充满之前先中断一行

1 个答案: