如何使此頁面響應
[英]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.