在以下 CSS
中@media screen and (max-width: 750px) {
.flexbox {
display: block;
}
.menu ul {
padding-right: 7px;
padding-top: 7px;
width: 2140px; /* Should not be a fixed calculated number */
}
.menu ul > li {
box-sizing: border-box;
margin-right: 0;
margin-top: 0;
width: 100px;
float: left;
}
}
width: 2140px
不应该是固定的计算数字,因为它可能不同。
总计
* {
margin: 0;
padding: 0;
border: 0;
vertical-align: base;
}
#wrapper {
position: relative;
}
header,
footer {
position: absolute;
height: 10%;
width: 100%;
background: beige;
}
footer {
top: 90%;
}
.flexbox {
display: flex;
border: 1px solid;
position: absolute;
width: 90%;
left: 5%;
height: 70%;
top: 15%;
}
.menu {
flex: 1;
overflow-y: auto;
}
.menu ul {
z-index: 3;
list-style-type: none;
}
.menu ul > li {
border: 1px solid black;
background: height: 70px;
margin: 7px;
padding: 7px;
}
main {
flex: 3;
border: 1px solid black;
}
@media screen and (max-width: 750px) {
.flexbox {
display: block;
}
.menu ul {
padding-right: 7px;
padding-top: 7px;
width: 2140px;
/* Should not be a fixed calculated number */
}
.menu ul > li {
box-sizing: border-box;
margin-right: 0;
margin-top: 0;
width: 100px;
float: left;
}
}
<div class="wrapper">
<header>
</header>
<div class="flexbox">
<aside class="menu">
<ul>
<li>
<section>
<h3>Section 1</h3>
<p>Text 1</p>
</section>
</li>
<li>
<section>
<h3>Section 2</h3>
<p>Text 2</p>
</section>
</li>
<li>
<section>
<h3>Section 3</h3>
<p>Text 3</p>
</section>
</li>
<li>
<section>
<h3>Section 4</h3>
<p>Text 4</p>
</section>
</li>
<li>
<section>
<h3>Section 5</h3>
<p>Text 5</p>
</section>
</li>
<li>
<section>
<h3>Section 6</h3>
<p>Text 6</p>
</section>
</li>
<li>
<section>
<h3>Section 7</h3>
<p>Text 7</p>
</section>
</li>
<li>
<section>
<h3>Section 8</h3>
<p>Text 8</p>
</section>
</li>
<li>
<section>
<h3>Section 9</h3>
<p>Text 9</p>
</section>
</li>
<li>
<section>
<h3>Section 10</h3>
<p>Text 10</p>
</section>
</li>
<li>
<section>
<h3>Section 11</h3>
<p>Text 11</p>
</section>
</li>
<li>
<section>
<h3>Section 12</h3>
<p>Text 12</p>
</section>
</li>
<li>
<section>
<h3>Section 13</h3>
<p>Text 13</p>
</section>
</li>
<li>
<section>
<h3>Section 14</h3>
<p>Text 14</p>
</section>
</li>
<li>
<section>
<h3>Section 15</h3>
<p>Text 15</p>
</section>
</li>
<li>
<section>
<h3>Section 16</h3>
<p>Text 16</p>
</section>
</li>
<li>
<section>
<h3>Section 17</h3>
<p>Text 17</p>
</section>
</li>
<li>
<section>
<h3>Section 18</h3>
<p>Text 18</p>
</section>
</li>
<li>
<section>
<h3>Section 19</h3>
<p>Text 19</p>
</section>
</li>
<li>
<section>
<h3>Section 20</h3>
<p>Text 20</p>
</section>
</li>
</ul>
</aside>
<main>
<h2>Main</h2>
</main>
</div>
<footer>
</footer>
</div>
我已经测试了display: inline-block
和其他内容,但没有找到解决方案。
这只能用CSS完成吗?
答案 0 :(得分:2)
从.menu ul>li{
删除float:left并添加display:table-cell
* {
margin: 0;
padding: 0;
border: 0;
vertical-align: base;
}
#wrapper {
position: relative;
}
header,
footer {
position: absolute;
height: 10%;
width: 100%;
background: beige;
}
footer {
top: 90%;
}
.flexbox {
display: flex;
border: 1px solid;
position: absolute;
width: 90%;
left: 5%;
height: 70%;
top: 15%;
}
.menu {
flex: 1;
overflow-y: auto;
}
.menu ul {
z-index: 3;
list-style-type: none;
}
.menu ul > li {
border: 1px solid black;
background: height: 70px;
margin: 7px;
padding: 7px;
}
main {
flex: 3;
border: 1px solid black;
}
@media screen and (max-width: 750px) {
.flexbox {
display: block;
}
.menu ul {
padding-right: 7px;
padding-top: 7px;
/* width: 2140px; */
/* Should not be a fixed calculated number */
}
.menu ul > li {
box-sizing: border-box;
margin-right: 0;
margin-top: 0;
width: 100px;
/*float: left;*/
display:table-cell;
}
}
&#13;
<div class="wrapper">
<header>
</header>
<div class="flexbox">
<aside class="menu">
<ul>
<li>
<section>
<h3>Section 1</h3>
<p>Text 1</p>
</section>
</li>
<li>
<section>
<h3>Section 2</h3>
<p>Text 2</p>
</section>
</li>
<li>
<section>
<h3>Section 3</h3>
<p>Text 3</p>
</section>
</li>
<li>
<section>
<h3>Section 4</h3>
<p>Text 4</p>
</section>
</li>
<li>
<section>
<h3>Section 5</h3>
<p>Text 5</p>
</section>
</li>
<li>
<section>
<h3>Section 6</h3>
<p>Text 6</p>
</section>
</li>
<li>
<section>
<h3>Section 7</h3>
<p>Text 7</p>
</section>
</li>
<li>
<section>
<h3>Section 8</h3>
<p>Text 8</p>
</section>
</li>
<li>
<section>
<h3>Section 9</h3>
<p>Text 9</p>
</section>
</li>
<li>
<section>
<h3>Section 10</h3>
<p>Text 10</p>
</section>
</li>
<li>
<section>
<h3>Section 11</h3>
<p>Text 11</p>
</section>
</li>
<li>
<section>
<h3>Section 12</h3>
<p>Text 12</p>
</section>
</li>
<li>
<section>
<h3>Section 13</h3>
<p>Text 13</p>
</section>
</li>
<li>
<section>
<h3>Section 14</h3>
<p>Text 14</p>
</section>
</li>
<li>
<section>
<h3>Section 15</h3>
<p>Text 15</p>
</section>
</li>
<li>
<section>
<h3>Section 16</h3>
<p>Text 16</p>
</section>
</li>
<li>
<section>
<h3>Section 17</h3>
<p>Text 17</p>
</section>
</li>
<li>
<section>
<h3>Section 18</h3>
<p>Text 18</p>
</section>
</li>
<li>
<section>
<h3>Section 19</h3>
<p>Text 19</p>
</section>
</li>
<li>
<section>
<h3>Section 20</h3>
<p>Text 20</p>
</section>
</li>
</ul>
</aside>
<main>
<h2>Main</h2>
</main>
</div>
<footer>
</footer>
</div>
&#13;