问P标记在一行填满之前将其换行
EN

Stack Overflow用户

提问于 2018-12-17 15:10:42

回答 1查看 48关注 0票数 0

请看图片和问题。您可以看到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>

css

html

回答 1

Stack Overflow用户

发布于 2018-12-17 17:57:41

我知道答案了！因为bootstrap类"hidden-sm“只是将元素的不透明度设为0。所以元素仍然占用空间。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53810418

复制

相似问题

问P标记在一行填满之前将其换行
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问P标记在一行填满之前将其换行EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问P标记在一行填满之前将其换行
EN