0
Привет, я пытаюсь сделать эту веб-страницу, но столкнулся с этой проблемой, используя встроенный блок, но не создавая новую строку, которую он просто продолжает двигаться по прямой. Мне нужно, чтобы она создавала новую линию он достигает предела заполнения MainPage, как я могу это сделать, я думал, что встроенный автоматически делает новую строкуCSS встроенный блок, не создающий новую строку
Спасибо.
<!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>
Инлайн-блок просто держит добавление элементов на одной прямой. Если вам нужна новая строка, вы можете использовать display: block. – StaticBeagle
Я хочу его в строке, но как только он достигает 5 - 6, добавляется новая строка, как я могу это сделать? – Wexo
Привет, извините, неясно, что вы хотите здесь сделать? –