CSS flexbox问题与段落
我的Flexbox和文本有问题，它不像移动视图中的导航栏那样关注。我希望它用与菜单大小相同的文本填充屏幕。
问题：
我希望看起来像我的body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #EBEBEB;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #F16529;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.container {
margin-left: 25%;
padding: 1px 16px;
height: auto;
}
@media screen and (max-width: 480px) {
ul {
position: relative;
width: 100%;
}
.container {
margin: 0 auto;
padding: 1px 16px;
}
div.item {
width: initial;
max-width: 256px;
}
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
max-width: 256px;
}
.blog {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.caption {
display: block;
}
img {
display: block;
}
img.wrap {
max-width: 70%;
margin: 30px 0px;
}
img.align-right {
float: right;
margin-left: 30px;
}
div.article-container {
padding: 5px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #EBEBEB;
text-align: center;
}
@media(max-width:767px) {
img.align-right {
float: none;
margin: auto;
}
div.article-container {
padding: 5px;
text-align: center;
max-width: 256px;
}
}
.flex-grid {
display: flex;
}
.flex-grid .col {
flex: 1;
}
.flex-grid-thirds {
display: flex;
justify-content: space-between;
}
.flex-grid-thirds .col {
width: 32%;
}
@media (max-width: 400px) {
.flex-grid,
.flex-grid-thirds {
display: block;
.col {
width: 100%;
margin: 0 0 10px 0;
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex-grid {
margin: 0 0 20px 0;
}，以便在整个移动设备屏幕上填写文字。在桌面视图中，它们是三个一起，在移动视图中，它们像汉堡一样堆叠，类似于Länk12 3 4的菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inlämningsuppgift 6</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--nav bar-->
<nav>
<ul>
<li style="list-style: none"><br></li>
<li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
<li>
<h2>Menu</h2>
</li>
<li>
<a class="active" href="#lank">Länk 1</a>
</li>
<li>
<a href="#lank2">Länk 2</a>
</li>
<li>
<a href="#lank3">Länk 3</a>
</li>
<li>
<a href="#lank4">Länk 4</a>
</li>
</ul>
</nav><!--navbar end-->
<!--container for blog posts 3 images-->
</div>
<div class="container">
<h1>Innehåll</h1>
<div class="flex-grid-thirds">
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alligment >
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div><!--end-->
<hr>
<!--container for article -->
<div class="container">
<div class="article-container clearfix">
<img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div><!--end-->
<footer class="container">
Skriven i HTML 5.
</footer>
</html>{{1}}
2 个答案:
答案 0 :(得分：1)
您使用.col更新媒体查询中.col部分的宽度，但您使用.flex-grid-thirds .col定义了初始宽度。因此，它只是媒体查询中的特殊问题。在媒体查询选择器中使用.flex-grid-thirds .col。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #EBEBEB;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #F16529;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.container {
margin-left: 25%;
padding: 1px 16px;
height: auto;
}
@media screen and (max-width: 480px) {
ul {
position: relative;
width: 100%;
}
.container {
margin: 0 auto;
padding: 1px 16px;
}
div.item {
width: initial;
max-width: 256px;
}
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
max-width: 256px;
}
.blog {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.caption {
display: block;
}
img {
display: block;
}
img.wrap {
max-width: 70%;
margin: 30px 0px;
}
img.align-right {
float: right;
margin-left: 30px;
}
div.article-container {
padding: 5px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #EBEBEB;
text-align: center;
}
@media(max-width:767px) {
img.align-right {
float: none;
margin: auto;
}
div.article-container {
padding: 5px;
text-align: center;
max-width: 256px;
}
}
.flex-grid {
display: flex;
}
.flex-grid .col {
flex: 1;
}
.flex-grid-thirds {
display: flex;
justify-content: space-between;
}
.flex-grid-thirds .col {
width: 32%;
}
@media (max-width: 400px) {
.flex-grid,
.flex-grid-thirds {
display: block;
}
.flex-grid-thirds .col {
width: 100%;
margin: 0 0 10px 0;
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex-grid {
margin: 0 0 20px 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inlämningsuppgift 6</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--nav bar-->
<nav>
<ul>
<li style="list-style: none"><br></li>
<li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
<li>
<h2>Menu</h2>
</li>
<li>
<a class="active" href="#lank">Länk 1</a>
</li>
<li>
<a href="#lank2">Länk 2</a>
</li>
<li>
<a href="#lank3">Länk 3</a>
</li>
<li>
<a href="#lank4">Länk 4</a>
</li>
</ul>
</nav><!--navbar end-->
<!--container for blog posts 3 images-->
</div>
<div class="container">
<h1>Innehåll</h1>
<div class="flex-grid-thirds">
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alligment >
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div><!--end-->
<hr>
<!--container for article -->
<div class="container">
<div class="article-container clearfix">
<img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div><!--end-->
<footer class="container">
Skriven i HTML 5.
</footer>
</html>
答案 1 :(得分：0)
问题是类.col仍然设置为32％的宽度。当浏览器小于480px时，正文文本仍然只有32％，应该是100％。
最简单的解决方法是添加
@media screen and (max-width: 480px) {
.col {
width: 100% !important;
}
}
如果要删除！important，可以将类.flex-grid-thirds .col移动到仅在浏览器大于481px时调用。
@media screen and (min-width: 481px) {
{
width: 32%;
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？