如何使此页面响应
[英]how to make this page responsive
问题描述
when I try to resize the screen, the list next to the image goes out of the border and also the last image in the bottom of the page part of it goes out of the border, how can I make it responsive so it can goes down the image when the screen is small or medium, here's the code of the html page with css 
当我尝试调整屏幕大小时，图像旁边的列表超出了边框，页面底部的最后一张图像也超出了边框，我如何使其具有响应性，所以它可以下降屏幕较小或中等时的图像，这是带有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>
if you tried to resize the screen you will notice that only the list, goes out of the border and the last image in the bottom part of it goes out of the border , can you help me solve this problem ? 如果您尝试调整屏幕大小，您会注意到只有列表超出了边框，底部的最后一张图像超出了边框，您能帮我解决这个问题吗？ I want the list to come down the image when the screen is resized 我希望列表在屏幕调整大小时能显示在图像上
3 个解决方案
解决方案1
5 已采纳 2018-10-08 01:37:33
First you'll want to add max-width: 100% to the img selector. 首先，您要向img选择器添加max-width: 100% 。 This will prevent all images from going outside of their respective containers. 这将防止所有图像移出其各自的容器。
This also solves your problem with the text going outside the container, but will cause the top image to become rather small at narrow widths. 这也解决了文本在容器外部的问题，但会导致顶部图像在窄宽度时变得很小。 To resolve this, I'd also recommend adding a media query (at say, 768px ) which removes display: flex from the .flexcontainer . 要解决此问题，我还建议添加一个媒体查询（例如768px ），该查询会从.flexcontainer删除display: flex 。 I'd also recommend making it add text-align: center to the two <div> elements which contain the two images, in order to horizontally center them. 我还建议使其在包含两个图像的两个<div>元素中添加text-align: center ，以使其水平居中。 I've given them the class .image to make this easier. 我给他们提供了.image类，以使其变得更容易。
This can be seen in the following: 可以在以下内容中看到：
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
You should use media query like this and make the display of .flexcontainer to display: block; 您应该使用像这样的媒体查询，并使.flexcontainer的显示成为display: block; . 。
try this: https://jsfiddle.net/o762ct48/ 试试这个： https : //jsfiddle.net/o762ct48/
@media screen and (max-width: 767px){
.flexcontainer {
display: block;
align-items: center;
}
}
解决方案3
0 2018-10-08 10:56:11
If you want to make your page responsive you should also try to make the images in the page responsive to the viewport size. 如果要使页面具有响应性，还应该尝试使页面中的图像响应于视口大小。
The image which looks great in a large width display may not look good in small width display vice-versa. 在大宽度显示器中看起来不错的图像在小宽度显示器中可能看起来不好，反之亦然。
This links will help you learn and understand how to make an image responsive: 该链接将帮助您学习和理解如何使图像响应：
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://www.w3schools.com/tags/att_source_srcset.asp https://www.w3schools.com/tags/att_source_srcset.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.