请看图片和问题。 你可以看到 p 元素不是满的，而是换了一行。 你能告诉我原因吗？ 非常感谢!
该代码由三个 block 组成，每个 block 包含三个文本描述。但是在第二个文本 block 中，当页面像素小于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>最佳答案
我得到了答案! 因为 Bootstrap 类“hidden-sm”只是将元素的不透明度设置为 0。所以该元素仍然占用空间。
关于html - p 标签在满之前换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53810418/