在CSS中从侧面到顶部重新排列DIV [英] Rearrange DIV's from Side-Side to Top-Down in CSS
问题描述
我希望以CSS响应的方式安排Intranet页面.我正在尝试使用@media断点以以下方式重新排列四个基本元素(嵌套在两个div中):
I'm looking to arrange an intranet page in a CSS Responsive manner. I'm trying to use @media breakpoints to rearrange four basic elements (nested in two divs) in the following manner:
@media only屏幕和(最小宽度:1100像素)/桌面模式/
@media only screen and (min-width: 1100px) /Desktop Mode/
@media only屏幕和(最大宽度:1099px)/移动设备/
@media only screen and (max-width: 1099px) /Mobile Devices/
我已经尽我所能使用此代码，其中包括JQuery向单个Div中添加一些小工具:
I have gotten as far as I have using this code, which includes JQuery to add some gadgets into the individual Divs:
<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以下，Div 2中的内容的上半部分将被剪切掉，就像它与屏幕的顶部重叠一样.我尝试过的其他任何技巧都只能将Div 1推到Div 2的左侧并离开屏幕.谁能看到我所缺少的东西?
At the moment, This code renders the way I want in Desktop mode, but under 1100px, the top half of the content in Div 2 will be cut off, as if it overlaps the top of the screen. Any other tricks I have tried just push Div 1 to the left of Div 2 and off of the screen. Can anyone see what I'm missing?
谢谢！
推荐答案
在媒体查询中，将width: 100%添加到第一个DIV中，然后从第二个DIV中删除position: absolute.
In your media query, add width: 100% to the first DIV and remove position: absolute from the second DIV.
此外，在第二个div中添加flex-direction: column;以获得垂直堆叠，并在其容器中添加flex-direction: column-reverse;(其类别由我在下面组成，但必须包装两个DIV)，以便在出现以下情况时获得DIV的相反顺序堆叠:
Also, add flex-direction: column; to the second div to get the vertical stacking and flex-direction: column-reverse; to their container (whose class I made up below, but which has to wrap the two DIVs) to get the reversed order of DIVs when stacking:
.container {
display: flex;
flex-direction: column-reverse;
}
.divOne {
display: flex;
width: 100%;
}
.divTwo {
display: flex;
flex-direction: column;
width: 100%;
}
这篇关于在CSS中从侧面到顶部重新排列DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
