css - 为什么在使用媒体查询时我的网格项目没有堆叠在一起?
问题描述
我试图让我的网格项目只有 2 个 div 使用媒体查询相互堆叠,但无论我改变什么,都没有改变。我认为将我的 3 列更改为 1 列将适用于我的媒体查询......但仍然没有。让我知道我做错了什么,因为无论我尝试什么都没有改变。
HTML
<div class="showcase-grid">
<div class="showcase-content">
<h1 class="showcase-heading">
My name is Edward Kelley and I strive to make the web
awesome.
</h1>
<p class="showcase-text">
I help businesses get noticed with fresh and innovative
content.
<br />Need something different for your business? Let's
get in
touch!
</p>
<button class="showcase-btn-1">About me</button>
<button class="showcase-btn-2">Contact</button>
</div>
<div class="showcase-background-img">
<img src="https://images.pexels.com/photos/847402/pexels-
photo-847402.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
</div>
</div>
SCSS
.showcase-grid {
grid-template-columns: repeat(3, 1fr);
display: grid;
align-items: center;
.showcase-content {
grid-column: 1 / 3;
.showcase-heading {
font-size: 2.5rem;
font-weight: 600;
}
.showcase-text {
padding-top: 2rem;
color: #828282;
}
.showcase-btn-1 {
border: 2px solid #4f6df5;
font-size: 0.9rem;
background-color: white;
color: #4f6df5;
padding: 1rem 1.5625rem;
cursor: pointer;
border-radius: 4px;
width: 170px;
transition: all 0.3s ease 0s;
font-weight: 600;
}
.showcase-btn-1:hover {
background-color: #4f6df5;
color: white;
}
.showcase-btn-2 {
color: white;
background-color: #4f6df5;
font-size: 0.9rem;
border: solid 2px #4f6df5;
padding: 1rem 1.5625rem;
cursor: pointer;
width: 170px;
border-radius: 4px;
transition: all 0.3s ease 0s;
margin-left: 0.5rem;
margin-top: 2rem;
font-weight: 600;
}
.showcase-btn-2:hover {
color: #4f6df5;
border: 2px solid #4f6df5;
background-color: white;
}
}
.showcase-background-img {
grid-column: 4;
img {
width: 420px;
}
}
}
@media screen and (max-width: 768px) {
.showcase-grid {
grid-template-columns: 1fr;
}
}
解决方案
问题是您明确设置了grid-column
. 更改grid-column: 1/3
和grid-column: span 2
取消grid-column: 4
- 请参见下面的演示:
.showcase-grid {
grid-template-columns: repeat(3, 1fr);
display: grid;
align-items: center;
}
.showcase-grid .showcase-content {
grid-column: span 2; /* CHANGED */
}
.showcase-grid .showcase-content .showcase-heading {
font-size: 2.5rem;
font-weight: 600;
}
.showcase-grid .showcase-content .showcase-text {
padding-top: 2rem;
color: #828282;
}
.showcase-grid .showcase-content .showcase-btn-1 {
border: 2px solid #4f6df5;
font-size: 0.9rem;
background-color: white;
color: #4f6df5;
padding: 1rem 1.5625rem;
cursor: pointer;
border-radius: 4px;
width: 170px;
transition: all 0.3s ease 0s;
font-weight: 600;
}
.showcase-grid .showcase-content .showcase-btn-1:hover {
background-color: #4f6df5;
color: white;
}
.showcase-grid .showcase-content .showcase-btn-2 {
color: white;
background-color: #4f6df5;
font-size: 0.9rem;
border: solid 2px #4f6df5;
padding: 1rem 1.5625rem;
cursor: pointer;
width: 170px;
border-radius: 4px;
transition: all 0.3s ease 0s;
margin-left: 0.5rem;
margin-top: 2rem;
font-weight: 600;
}
.showcase-grid .showcase-content .showcase-btn-2:hover {
color: #4f6df5;
border: 2px solid #4f6df5;
background-color: white;
}
/*.showcase-grid .showcase-background-img {
grid-column: 4;
}*/
.showcase-grid .showcase-background-img img {
width: 420px;
}
@media screen and (max-width: 768px) {
.showcase-grid {
grid-template-columns: 1fr;
}
}
<div class="showcase-grid">
<div class="showcase-content">
<h1 class="showcase-heading">
My name is Edward Kelley and I strive to make the web awesome.
</h1>
<p class="showcase-text">
I help businesses get noticed with fresh and innovative content.
<br />Need something different for your business? Let's get in touch!
</p>
<button class="showcase-btn-1">About me</button>
<button class="showcase-btn-2">Contact</button>
</div>
<div class="showcase-background-img">
<img src="https://via.placeholder.com/200" alt="" />
</div>
</div>
推荐阅读
- .net-core - 如何从 api post 方法中访问 FluentValidation 错误?
- sql - SQL查询,具有相同类型(名称)的条目总和
- tensorflow - 为什么我的 tensorflow 事件文件是空的?
- mxnet - 提高 Resnet 的训练准确性
- r - 计算 Donchian Channel 技术指标的更改日期
- ios - 警告 - 未知呼叫:react-native iOS 应用程序中的“relay:check”
- cordova - Cordova 需要 ios-deploy 1.9.2 或更高版本,你有 1.9.0 版本,但我安装了 1.9.4
- reactjs - 错误:reducer 执行时无法调用 Redux 调度?
- recursion - Prolog中的镜像二叉树
- admob - 我是否需要验证我的 admob 帐户,因为我已经在使用经过验证的 adsense 帐户?