【发布时间】：2020-09-14 15:08:27
【问题描述】：
我正在尝试复制 w3schools 示例布局。他们将float 用于内容列，但我认为flex 在这里会更加灵活。除了媒体查询，一切都很好。当我应用媒体查询来设置.left 和.right 列的宽度时，它不起作用。很可能它们在自己的内部增长了 100% 的宽度，但实际上并没有在整个页面中扩展......
我尝试使用 display: block; 删除 flex，但没有成功。我现在能做什么？
w3schools 的 JS Bin 链接：https://jsbin.com/befabibewi/edit?html,css,output
我的布局的 JS Bin 链接：https://jsbin.com/hobilaquyo/edit?html,css,output
* {
box-sizing: border-box;
}
html {
font-family: verdana, san-serif;
background: #f1f1f1;
}
header {
background: white;
width: 100%;
padding: 60px;
text-align: center;
}
/* Navigation Menu Started */
.nav {
overflow: hidden;
background: #1c1c1c;
}
.nav a {
float: left;
color: white;
padding: 12px;
text-decoration: none;
text-align: center;
}
.nav a:hover {
color: black;
background: white;
}
.nav-out {
float: right !important;
}
/* Navigation Menu Ended */
main {
display: flex;
}
.left {
width: 70%;
padding: 10px;
}
.right {
width: 30%;
padding: 10px;
}
/* post archive as card */
.card {
background: white;
padding: 20px;
margin-top: 20px;
overflow: auto;
}
/* button for post archive */
button {
padding: 8px;
border: 1px solid #555;
float: right;
cursor: pointer;
}
/* creating a fake image preview */
.img {
background: #ccc;
width: 100%;
height: 150px;
padding: 16px;
}
.about-me {
background: white;
padding: 20px;
margin-top: 20px;
}
/* round image for about me section */
.round-img {
background: #ccc;
width: 100px;
height: 100px;
padding: 16px;
border-radius: 50px;
}
/* related news styling */
.related-news {
background: white;
padding: 20px;
margin-top: 20px;
}
.related-news-thumbnail {
background: #ccc;
width: 100%;
height: 80px;
padding: 16px;
}
/* follow me section */
.follow-me {
background: white;
padding: 20px;
margin-top: 20px;
}
/* Our symantec footer */
footer {
background: #c9c9c9;
padding: 20px;
text-align: center;
margin-top: 12px;
}
/* When screen is 600px or lower, every post archive card as well as sidebar will be presented as full width block. */
@media screen and (max-width: 600px) {
.left, .right {
display: block;
width: 100%;
background: red; /* background is currently for testing purpose, to see if media query is actually working or not. You see, this property is working, where width is not working */
}
/* Simple Nav styling. */
.nav a{
display: block;
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Copying W3schools Sample Site</title>
</head>
<body>
<!-- Site header -->
<header>
<h1>My Website </h1>
<p>Resize the browser window to see the effect.</p>
</header>
<!-- Navigation menu -->
<div class="nav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#" class="nav-out">Link 4</a>
</div><br>
<!-- main tag, post archive and sidebar goes here -->
<main>
<!-- post archive -->
<div class="left">
<!-- every card is represented as a single post archive --> <div class="card">
<h2>Some title here for you</h2>
<h6>Date - 02.04.2020</h6>
<div class="img">Image</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore possimus assumenda tempore facilis <quam!lorem7></quam!lorem7></p>
<button>Read More</button>
</div>
<div class="card">
<h2>Some title here for you</h2>
<h6>Date - 02.04.2020</h6>
<div class="img">Image</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore possimus assumenda tempore facilis quam! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<button>Read More</button>
</div>
<div class="clear"></div>
<div class="card">
<h2>Some title here for you</h2>
<h6>Date - 02.04.2020</h6>
<div class="img">Image</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum fugit, praesentium dolores.</p>
<button>Read More</button>
</div>
</div>
<!-- sidebar panel -->
<div class="right">
<!-- about me -->
<div class="about-me">
<div class="round-img"></div>
<h3>Forhad Rahman</h3>
<p>Hi, I am new in web designing, developing and learning. Code on! :)</p>
</div>
<!-- related news -->
<div class="related-news">
<h5>Here is some related news for you</h5>
<div class="related-news-thumbnail"></div>
<h5>Can you try these news right away?</h5>
<div class="related-news-thumbnail"></div>
<h5>Some hot news is waiting for you!</h5>
<div class="related-news-thumbnail"></div>
<h5>Fresh news are here! Check it out. </h5>
<div class="related-news-thumbnail"></div>
</div>
<!-- follow me block -->
<div class="follow-me">
<h3>Follow Me</h3>
<p>Some text...</p>
</div>
</div>
</main>
<!-- This is footer, symantec footer! :D -->
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>【问题讨论】：