我希望前两个框的最大宽度向上,第二个框的最大宽度向下,这是代码。
这是CSS代码:
/* Start Services */
.services {
padding-top: var(--section-pading);
padding-bottom: var(--section-pading);
}
@media (min-widht: 768px) {
.services .services-contianer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}
}
.services .box {
display: flex;
}
.services .box i{
margin-right: 50px;
}
.services .box h3{
margin-bottom: 30px;
color: var(--main-color);
}
.services .box p{
line-height: 2;
}
/* End Services */
这是 HTML 代码:
<!-- Start Services -->
<div class="services">
<div class="container">
<div class="main-heading">
<h2>Services</h2>
<p> Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris
blandit aliquet elit, eget tincidunt.
</p>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-display fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-gear fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-pen-ruler fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-camera fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Services -->
这是我得到的结果:
我希望设计像下图一样,我想要上下 2 个盒子:
你能帮忙吗??
当我检查代码时,CSS代码中存在拼写错误。我对 HTML 代码做了一些更改。
请检查以下更新的代码:
/* Start Services */
.services {
padding-top: var(--section-pading);
padding-bottom: var(--section-pading);
}
@media (min-width: 768px) {
.services .services-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
/* background-color: red; */
}
}
.services .box {
display: flex;
}
.services .box i{
margin-right: 50px;
}
.services .box h3{
margin-bottom: 30px;
color: var(--main-color);
}
.services .box p{
line-height: 2;
}
/* End Services */
<!-- Start Services -->
<div class="services">
<div class="container">
<div class="main-heading">
<h2>Services</h2>
<p> Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris
blandit aliquet elit, eget tincidunt.
</p>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-display fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
<div class="box">
<i class="fa-solid fa-gear fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
<div class="box">
<i class="fa-solid fa-pen-ruler fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
<div class="box">
<i class="fa-solid fa-camera fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Services -->
在此代码中添加此样式有一些错误。
取而代之的是删除这段代码
@media (min-widht: 768px) {
.services .services-contianer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}
}
并添加此 CSS 代码希望您获得您想要的确切输出
.container {
display: flex;
flex-wrap: wrap;
}
.services-container .box {
width : 400px;
min-width: 50%;
}