Question

这么长的故事我有4张照片，但是当我让屏幕变小时，第4张照片会向下移动但不在填充框中。有什么帮助吗？

＆＃13;

  body {
 background-image: url('background_repeat.jpg')
}
/*Start css for rest of page*/
.header{
text-align: center;
color: white
}
.photos{
 margin: 0px 30px 0px;
 padding: 30px;
 display: inline;
 text-align: center;
 text-overflow: clip;
 }
.media{
display: inline;
padding: 3px;
background-color: grey;
border-radius: 5px;
margin: 10px;
height: 250px;
width: 250px;
}
.inline {
 display: inline;
 text-align: center;
 }

＆＃13;

    <div class="body">
        <div class="header">
            <h1>Photos</h1>
        </div>
        <div class="photos">
            <div class="inline">
            <video class="media" width="250" controls>
            <source src="New%20Edit.mp4" type="video/mp4">
            </video>
            <img class='media' src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSv8yf5AnclVcQwBtApNkfNlk5ZZKlxswqNylSgD7PhbACsjbXn">
            <img class='media' src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSv8yf5AnclVcQwBtApNkfNlk5ZZKlxswqNylSgD7PhbACsjbXn">
            <img class='media' src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSv8yf5AnclVcQwBtApNkfNlk5ZZKlxswqNylSgD7PhbACsjbXn">     
            </div>
        </div>
    </div>

＆＃13;

我只是错过了什么或者我做错了什么？

Answer 1

从display:inline CSS 类中删除.inline，您将看到第四个框将div放在下一行。如果您希望自己的内容能够快速响应，并且在任何视口中都能很好地显示，那么您必须使用媒体查询，您可以对此进行全面的了解，并阅读此内容;

Media Query

解决方案的jsfiddle;

Image Centered

照片居中

1 个答案: