當我調整div中瀏覽器窗口內容的大小時，它應該是從div中出來的
[英]when i resize browser window content in div comes out from div it should not come out from
問題描述
當我調整瀏覽器窗口大小時，div中的內容就會出現。 當我縮小和放大瀏覽器窗口時，無論寬度和高度如何，它都應保持在其位置，並且瀏覽器窗口和內容div必須隨瀏覽器的動態高度和寬度自動調整：
.item: { display: table; word-break: break-all; white-space: nowrap; border: 1px; border-style: solid; border-color: silver; border-radius: 4px; ); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .awesome { border-right: 1px solid rgba(0, 0, 0, .12); margin: auto; padding: 16px; -webkit-text-size-adjust: none; font-size: 20px; color: white; display: table-cell; font-size: 1em; } .fa-bars: { position: absolute; top: 15px; right: 16px; font-size: 5em; color: coral; display: table-cell }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link> </head> <body> <div > <ul> <li gridster-item="item" ng-repeat="item in Items"> <div class="awesome">hello world <i class="fa fa-bars"></i></div> </li> </ul> </div> </body> </html>
1 個解決方案
解決方案1
0 2018-04-19 10:32:22
.item { display: table; width: auto; height: auto; word-break: break-all; white-space: nowrap; border: 1px; border-style: solid; border-color: silver; border-radius: 4px; } @-ms-viewport{ width: device-width; } .awesome { padding: 10px 0; box-shadow: none; border-radius: 0; background: none; text-align: center; color: #30a5ff; top: 105px; text-align: center font-size: 1em; } /* .fa-check-square:before { top: 15px; right: 16px; font-size: 5em; color: coral; display: table-cell } */
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="height=device-height, initial-scale=1"> <div gridster="gridsterOpts" align="center"> <ul> <li gridster-item="item" ng-repeat="item in Items" class="item" align="center"> <h2 class="awesome" align="right">Hello world! <i class="fa fa-check-square" aria-hidden="true"></i></h2> </li> </ul> </div>
HTML代碼：（一起）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<style>
.item {
display: table;
width: auto;
height: auto;
word-break: break-all;
white-space: nowrap;
border: 1px;
border-style: solid;
border-color: silver;
border-radius: 4px;
}
@-ms-viewport {
width: device-width;
}
.awesome {
padding: 10px 0;
box-shadow: none;
border-radius: 0;
background: none;
text-align: center;
color: #30a5ff;
top: 105px;
text-align: center font-size: 1em;
}
/*
.fa-check-square:before {
top: 15px;
right: 16px;
font-size: 5em;
color: coral;
display: table-cell
} */
</style>
</head>
<body>
<div gridster="gridsterOpts" align="center">
<ul>
<li gridster-item="item" ng-repeat="item in Items" class="item" align="center">
<h2 class="awesome" align="right">Hello world! <i class="fa fa-check-square" aria-hidden="true"></i></h2>
</li>
</ul>
</div>
</body>
</html>
當瀏覽器變窄時，防止左div滑出瀏覽器
[英]Prevent left div from sliding out of the browser when the browser is narrower
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.