0
我正在尋找以CSS響應方式安排Intranet頁面。我試圖使用@media斷點重新排列四個基本要素（嵌套在兩個div）以下面的方式：在CSS中重新排列DIV從側面到自上而下
@media只有屏幕和（最小寬度：1100px）/ 桌面模式/ 
@media屏幕和（最大寬度：1099px）/ 移動設備/ 
正如我使用此代碼，其包括jQuery來某些小工具添加到個體的div我已經儘可能得到：
<script type="text/javascript">
var adhcal = '<iframe src="..."</iframe>'
var clincal = '<iframe src="..."</iframe>';
var timeUrl = '<iframe id = "timeTrack" src="...</iframe>';
function start()
{
var dOne = $('<div>').addClass('divOne');
var dTwo = $('<div>').addClass('divTwo');
$('body').append(dOne).append(dTwo);
var timeDiv = $('<div id = "timeDiv"></div>').addClass('timeDiv');
dTwo.append(timeDiv);
var timeTrack = $(timeUrl);
timeDiv.append(timeTrack)
timeTrack.load(function(){
try{
var timeHeight = document.getElementById('timeTrack').contentWindow.document;
var body = timeHeight.body, html = timeHeight.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
}
catch(e){var height = 500;}
timeDiv.height(height);});
var adhDiv = $('<div id = "adhDiv"></div>').addClass('adhDiv');
dTwo.append(adhDiv);
adhcal = adhcal.replace('height="100%"', 'height="'+((adhDiv.height() > 0)?adhDiv.height():'600')+'"');
adhDiv.append(adhcal);
var clinDiv = $('<div id = "clinDiv"></div>').addClass('clinDiv');
dTwo.append(clinDiv);
clincal = clincal.replace('height="100%"', 'height="'+((clinDiv.height() > 0) ? clinDiv.height():'600')+'"');
clinDiv.append(clincal);
var postDiv = $('<div id = "postDiv"></div>').addClass('postDiv');
dOne.append(postDiv);
for(var p = 0; p < DATA.posts.length; p++)
{
postDiv.append('<h2>'+DATA.posts[p].title
+'</h2><p class = "date">Published: '+moment(new Date(DATA.posts[p].date)).format('L')
+'</p><p class="post">'
+DATA.posts[p].html
+'</p>').append('<hr>');
}
}
</script><style>
.body{
overflow:auto;
}
H2{
font-size: 2.00rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.date{
font-size: 1.00rem;
color: #595959;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.post{
font-size: 1.50rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
@media only screen and (min-width: 1100px) {
.divOne{
float:left;
max-width:60%
}
.divTwo{
float:right;
max-width: 30%;
}
.adhDiv {
max-width: 100%;
height: 400px;
}
.clinDiv {
max-width: 100%;
height: 400px;
}
.postDiv {
max-width: 100%;
height: 900px;
overflow: auto;
float: left;
}
.timeDiv {
max-width: 100%;
height: 200px;
}
}
@media only screen and (max-width: 1099px){
.divOne{
display: flex;
}
.divTwo{
position: absolute;
top: 0;
display: flex;
width: 100%;
}
.adhDiv {
max-width: 100%;
height: 400px;
}
.clinDiv {
max-width: 100%;
height: 400px;
}
.postDiv {
max-width: 100%;
height: 900px;
overflow: auto;
float: left;
}
.timeDiv {
max-width: 100%;
height: 200px;
}
}
</style><!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>var DATA = <?!= JSON.stringify(dataFromServerTemplate) ?>;</script>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
</head>
<body onload="start()">
<?!= HtmlService.createHtmlOutputFromFile('JS-Intranet').getContent();?>
</body>
</html>目前，該代碼使得我想在桌面模式的方式，但1100px下，在2區內容的上半部分將被切斷，就好像它重疊屏幕頂部。我嘗試過的任何其他技巧只是將Div 1推到Div 2的左邊並離開屏幕。任何人都可以看到我失蹤的東西嗎？
謝謝！
這是爲什麼downvoted？我剛剛分享了對我有用的東西.... –
它的原因是其中有太多與該問題無關的其他代碼 - 因此很難閱讀並保持專注。 –