CSS内联块不生成换行符
CSS内联块不生成换行符
提问于 2016-06-12 18:48:51
嗨，我试着制作这个网页，但是面对这个问题，我用的是内嵌块，但是它没有新的行，它只是在一条直线上继续前进，我需要它来做一个新的行，一旦它达到MainPage填充限制，我怎么能做到这一点，我认为内联自动生成一个新行。
谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#MainPage {
padding-left: 230px;
padding-right: 230px;
}
body > #body-container {
height: auto;
min-height: 100%;
}
.pageData {
display: table;
table-layout: fixed;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.PageInner {
display: table-row;
}
.PageCard {
margin: 0 0 10px;
border: 0;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.gridItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
width: 196px;
word-wrap: break-word;
}
#Pagebox {
border-bottom: 1px solid #e2e2e2;
padding-left: 18px;
padding-right: 18px;
}
.UL-Slider {
width: 100%;
overflow: visible;
position: relative;
left: 0;
white-space: nowrap;
font-size: 0;
vertical-align: top;
-moz-transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
}
.MovieItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
width: 196px;
word-wrap: break-word;
}
.Video-CFix {
font-size: 11px;
color: #767676;
position: relative;
}
.LockUp-Thumbnail {
margin-bottom: 4px;
}
.VideoThumb {
font-size: 0;
}
.VideoTitle {
margin-right: 20px;
font-size: 13px;
margin-bottom: 1px;
max-width: 196px;
}
</style>
</head>
<body>
<div id="body-container">
<div id="MainPage">
<div class="pageData">
<div class="PageInner">
<div class="PageCard">
<div class="gridItem">
<div id="Pagebox">
<ul class="UL-Slider">
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
<li class="MovieItem">
<div class="Video-CFix">
<div class="LockUp-Thumbnail">
<div class="VideoThumb">
<img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
width="196" alt="" height="110">
</div>
</div>
<div class="lockup-title">
<span class="VideoTitle">
<a href="#">Movie</a>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-12 19:08:14
我已经修改了您的css，您必须从. .gridItem中删除空格: you，并从.gridItem中删除宽度。也可以减少#主页中的填充
#MainPage {
padding-left: 100px;
padding-right: 100px;
}
body > #body-container {
height: auto;
min-height: 100%;
}
.pageData {
display: table;
table-layout: fixed;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.PageInner {
display: table-row;
}
.PageCard {
margin: 0 0 10px;
border: 0;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.gridItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
word-wrap: break-word;
}
#Pagebox {
border-bottom: 1px solid #e2e2e2;
padding-left: 18px;
padding-right: 18px;
}
.UL-Slider {
width: 100%;
overflow: visible;
position: relative;
left: 0;
white-space: normal;
font-size: 0;
vertical-align: top;
-moz-transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
}
.MovieItem {
display: inline-block;
margin-right: 10px;
vertical-align: top;
width: 196px;
word-wrap: break-word;
}
.Video-CFix {
font-size: 11px;
color: #767676;
position: relative;
}
.LockUp-Thumbnail {
margin-bottom: 4px;
}
.VideoThumb {
font-size: 0;
}
.VideoTitle {
margin-right: 20px;
font-size: 13px;
margin-bottom: 1px;
max-width: 196px;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37777885
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号