如何使此页面响应
[英]how to make this page responsive
问题描述
当我尝试调整屏幕大小时，图像旁边的列表超出了边框，页面底部的最后一张图像也超出了边框，我如何使其具有响应性，所以它可以下降屏幕较小或中等时的图像，这是带有css的html页面的代码
h1 { text-align: center; } ul { list-style: none; } .flexcontainer { display: flex; align-items: center; } .container { padding-top: 1%; padding-bottom: 1%; margin-top: 1%; margin-bottom: 1%; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Employee's Page</title> <link rel="stylesheet" href="./assets/css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <h1>Ahmed Haiba</h1> <div class="container" style="border:1px solid #000000;"> <div class="flexcontainer"> <div> <img src="http://placehold.it/350x250"> </div> <div> <ul> <li> <h3>Full name: Ahmed Haiba</h3> </li> <li> <h3>Gender: Male</h3> </li> <li> <h3>Phone number: +9980989798</h3> </li> <li> <h3>Company: AST</h3> </li> <li> <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3> </li> </ul> </div> </div> <div> <h3>About employee:</h3> <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p> </div> <div> <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3> </div> <div> <img src="http://placehold.it/500x250"> </div> </div> </body> </html>
如果您尝试调整屏幕大小，您会注意到只有列表超出了边框，底部的最后一张图像超出了边框，您能帮我解决这个问题吗？ 我希望列表在屏幕调整大小时能显示在图像上
3 个解决方案
解决方案1
5 已采纳 2018-10-08 01:37:33
首先，您要向img选择器添加max-width: 100% 。 这将防止所有图像移出其各自的容器。
这也解决了文本在容器外部的问题，但会导致顶部图像在窄宽度时变得很小。 要解决此问题，我还建议添加一个媒体查询（例如768px ），该查询会从.flexcontainer删除display: flex 。 我还建议使其在包含两个图像的两个<div>元素中添加text-align: center ，以使其水平居中。 我给他们提供了.image类，以使其变得更容易。
可以在以下内容中看到：
h1 { text-align: center; } ul { list-style: none; } .flexcontainer { display: flex; align-items: center; } .container { padding-top: 1%; padding-bottom: 1%; margin-top: 1%; margin-bottom: 1%; } img { max-width: 100%; } @media screen and (max-width: 768px) { .flexcontainer { display: block; } .image { text-align: center; } }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Employee's Page</title> <link rel="stylesheet" href="./assets/css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <h1>Ahmed Haiba</h1> <div class="container" style="border:1px solid #000000;"> <div class="flexcontainer"> <div class="image"> <img src="http://placehold.it/350x250"> </div> <div> <ul> <li> <h3>Full name: Ahmed Haiba</h3> </li> <li> <h3>Gender: Male</h3> </li> <li> <h3>Phone number: +9980989798</h3> </li> <li> <h3>Company: AST</h3> </li> <li> <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3> </li> </ul> </div> </div> <div> <h3>About employee:</h3> <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p> </div> <div> <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3> </div> <div class="image"> <img src="http://placehold.it/500x250"> </div> </div> </body> </html>
解决方案2
2 2018-10-08 01:43:20
您应该使用像这样的媒体查询，并使.flexcontainer的显示成为display: block; 。
试试这个： https : //jsfiddle.net/o762ct48/
@media screen and (max-width: 767px){
.flexcontainer {
display: block;
align-items: center;
}
}
解决方案3
0 2018-10-08 10:56:11
如果要使页面具有响应性，还应该尝试使页面中的图像响应于视口大小。
在大宽度显示器中看起来不错的图像在小宽度显示器中可能看起来不好，反之亦然。
该链接将帮助您学习和理解如何使图像响应：
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
如何使这个页面响应？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.