html - flex wrap html和css
问题描述
我尝试在我的网站中放置一个像博客一样的文章框内容，所以...我尝试使其成为一个响应良好的网站，但是 wrap css 不起作用，everthing is on a column or allthing is on a row，但是我想包装像 1、2、3、4、5 这样的盒子，当屏幕尺寸变大或变大时……我已经对此不好了，我有几个小时试图弄清楚但我不明白. 太感谢了。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: lightslategrey;
color: white;
font-size: 16px;
}
a {
color: white;
text-decoration: none;
}
Nav {
font-family: 'Raleway', sans-serif;
}
ul {
list-style: none;
}
.container {
width: 90%;
margin: auto;
}
/* Navigation */
.nav-main {
font-size: 17px;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 20px 0;
}
.logo-nav {
font-size: 20px;
}
/* Nav left */
.nav-main ul {
display: flex;
}
.nav-main ul li {
padding: 10px;
}
.nav-main ul li a {
padding: 4px;
}
.nav-main ul li a:hover {
border-bottom: 2px solid #ffffff;
}
.nav-main ul.nav-menu {
flex: 1px;
margin-left: 95px;
}
/*SHOWCASE*/
hr {
margin-bottom: 10px;
}
.showcase {
font-family: 'Raleway', sans-serif;
width: 100%;
height: 400px;
background: url(./img/fondoshowcase.jpeg) no-repeat center center/cover;
padding-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.text-showcase {
align-items: center;
width: 90%;
}
.showcase h2,
.showcase p {
margin-bottom: 15px;
}
.btnshowcase {
cursor: pointer;
display: inline-block;
border: 0px;
font-weight: bold;
padding: 10px 20px;
background: darkorange;
}
.btnshowcase:hover {
opacity: .9;
}
/* News Cards*/
.midcontainer {
background-color: white;
}
@media screen and (min-width: 650px) {
.news-container,
.news-cards {
display: grid;
}
}
@media screen and (max-width: 900px) {
.news-container {
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.news-sep{
margin-bottom: 25px;
}
.news-container {
text-align: center;
}
.news-cards {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.news-cards img {
width: 85%;
height: 30%;
min-height: 180px;
max-width: 85%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marcos Canela</title>
<!--font awesome-->
<script src="https://kit.fontawesome.com/335ba1c44e.js" crossorigin="anonymous"></script>
<!--CUSTOM CSS-->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="head">
<nav class="nav-main">
<a href=""><h1 class="logo-nav"> Marcos Canela </h1></a>
<ul class="nav-menu">
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Inicio</a>
</li>
</ul>
<ul class="nav-menu-right">
<li>
<a href="#">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
<hr></hr>
<!-- showcase-->
<header class="showcase">
<div class="text-showcase">
<h2>Big new today</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, sed, nihil ipsum quibusdam eum inventore veniam odit itaque fugit quod quidem placeat delectus quis doloremque ullam facere magni id quia?</p>
<a href="#" class="btnshowcase">Click Aqui <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
</header>
</div>
</div>
<!--News Cards-->
<div class="midcontainer">
<hr class="news-sep"></hr>
<div class="news-container">
<div class="news-cards">
<div class="news1">
<img src="/Pruebas/Sitio 2/src/img/news1.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
<a href="#">ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
<div class="news2">
<img src="/Pruebas/Sitio 2/src/img/news2.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
<a href="#">ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
<div class="news3">
<img src="/Pruebas/Sitio 2/src/img/news3.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
<a href="#">ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
<div class="news4">
<img src="/Pruebas/Sitio 2/src/img/news4.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
<a href="#">ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>解决方案
推荐阅读
- python - 类型错误：__init__() 得到了一个意外的关键字参数“reg_alpha”
- javascript - 以角度 10 提交表单后无法清除 ngx-mat-intl-tel-input
- c# - 隐藏表格并显示
- python-3.x - 为什么 sphinx-build（与 Python 3.8.6 一起安装）使用 Python 3.8.2？
- android - java.lang.IllegalArgumentException: 找不到 (android:id/content) 的视图
- c# - 实体框架核心（使用 mysql）模型首先 apporach 如何运行自定义查询以获得一些计数
- azure - 错误：找不到具有指定模式的包：D:\a\1\s\**\*.zip
- conda - 在全新安装康达时，康达本身出现错误 ResolvePackageNotFound
- python - ValueError: "ResizeBilinear" op: 第二个输入，也就是输出大小，必须有 int32 类型的元素
- .net-core - Docusign JWT 身份验证 dotnet 核心问题