我已经尝试了不同的方法，但还没有找到一种方法来保持我的侧边栏的某些部分在某些屏幕尺寸下落在我的主要帖子之下。
（他们都被置于手机内容之下但不是在屏幕仍处于PC /平板电脑尺寸时）
有没有办法更改它们或将它们放入容器中以便它们保持在左侧，而不必重做所有内容？
https://codepen.io/Pinchofginger/pen/ypzMvX
HTML
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 40.5em)" href="styletablet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="maincontent">
<div class="content">
<article class="topcontent">
<img class="mellemh" src="http://i1246.photobucket.com/albums/gg611/Rcoslive/tumblr_opglesDkzP1rfn5l1o1_540_zpsk1t1dhzo.jpg" alt="Kdog"/>
<!-- 1 --------------------------------------------------------------------------->
<div class=brødtekst><p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div></div></div>
</article>
<div class="sidemenu">
<aside class="top-sidebar">
<article>
<h3> <a href="#">Plejefamilier og frivillige søges</a></h3>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h3>Ugens kat</h3> <img src="billeder/katte/mathilde.jpg" alt="Mathilde">
<p><a href="#">Mathilde</a></p>
</article></aside>
<aside class="middle-sidebar">
<article>
<img src="billeder/ungkat/sailor.jpg" alt="Sailor" >
<p> <a href="#">Sailor</a> </p>
</article></aside>
<aside class="bottom-sidebar">
<article>
<h3>Ugens killng</h3>
<img src="billeder/killinger/mr.grey.jpg" alt="Mr.Grey" >
<p><a href="#">Mr.Grey</p></a>
<p>en herlig lille gut med fuld fart på!</p>
</article>
</aside>
</div>
</body>
</html>
CSS
/******************************************************************/
/* RESET */
/* ______________ */
/*meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126*/
/*License: none (public domain) */
/******************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.2em;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*******************************************************************/
/* GEN */
/*******************************************************************/
/* Box-sizing = width or height + padding + border = reelle højde og bredde. */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/***********************************************************/
/* Billeder! Img! ****** Video! */
/***********************************************************/
.mellemh {
float: left;
padding: 10px 10px 0 2px;;
width: 55%;}
.sidemenu img { width: 40%; float: left; margin-right: 5px; }
/***********************************************************/
/* Tekst! */
/***********************************************************/
.sidemenu .b {font-weight: bold; color: orange;}
.content h1, h2, h3 {
margin: 0 0 2% 0;
}
.sidebar h1, h2, h3 {margin: 0 0 2% 0;}
h1 {font-size: 1.5em; color: orange;}
h2 {font-size: 1.3em;color: orange;}
h3 {font-size: 1.1em;color: orange;}
.brødtekst
{white-space: pre-line;}
/******************************************************************************/
/* SIDEBAR! */
/******************************************************************************/
.top-sidebar {
text-align: left;
width: 100%;
float: left;
margin-top: 3px;
background-color: white;
margin: 0 auto;
padding: 0 1% 1% 1%;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
.middle-sidebar {
text-align: left;
width: 100%;
float: left;
background-color: white;
margin: 1% 0 0 0;
padding: 0 1% 1% 1%;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
.bottom-sidebar {
text-align: left;
width: 100%;
float: left;
background-color: white;
margin: 1% 0 1% 0;
padding: 0 1% 1% 1%;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
/******************************************************************************/
/* MAIN! ***** BODY! */
/******************************************************************************/
body {
background-color: grey;
background-size: cover;
color: black;
font-family: sans-serif, arial;
text-align: left;
}
.body {
margin: 0 auto;
/* Alt er centreret*/
width: 99%;
clear: both;
}
/* Ikke nødvendigt, men godt at have "just in case"*/
.maincontent {
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
.content {
width: 100%;
float: left;}
.topcontent {
background-color: white;
border-radius: 5px;
float: left;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
margin: 1% 0 1% 0;
padding: 3% 3% 3% 3%
}
/* BIG SCREENS START HERE*******************/
@media only screen and (min-width: 40.5em) {
/* IMG! *************** VIDEO! *************************************/
.sidemenu img { float: none; width: 70%; margin: 2 auto; }
.top-sidebar img {width: 70%;}
.mellemh {
padding: 10px 20px 0 2px;;
width: 35%;}
/* MAIN! BODY! *********************************************************/
body {
background-image: url("billeder/bgorange.jpg");
background-size: cover;
color: black;
/* Base font size (14px)? 7%*/
font-family: sans-serif, arial;
text-align: left;
}
.body { width: 90%;}
.maincontent {
display: flex; flex-direction: column;
line-height: 20px;
width: 81%;
float: left;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
.topcontent {
background-color: white;
height: auto;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
padding: 1% 3% 1%% 3%
}
.bottomcontent {
background-color: white;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
margin: 0 0 2% 0;
padding: 1% 5% 3% 3%
}
/* SIDEBAR!***************************************************************/
.top-sidebar {
text-align: center;
width: 18%;
float: left;
background-color: white;
padding: 1% 1% 1% 1%;
margin: 1% 0 0 1%;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
.middle-sidebar {
text-align: center;
width: 18%;
float:left;
background-color: white;
padding: 1% 1% 1% 1%;
margin: 1% 0 0 1%;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
.bottom-sidebar {
text-align: center;
width: 18%;
float: left;
background-color: white;
padding: 1% 1% 1% 1%;
margin: 1% 0 1% 1%;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
.sidemenu p {color: grey;}
答案 0 :(得分：1)
如果您不想将所有内容重做为flexbox模型，可以添加一个小修补程序：
.maincontent {
/*your code here for this block*/
padding-bottom: 70px;
}
最后一个侧边栏不会掉下来。这是一个很好的临时解决方案，但我强烈建议使用flexbox代替这种布局。