css 我正在尝试制作半盒，但如何显示半盒[已关闭]

2guxujil 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(132)

已关闭。此问题需要details or clarity。当前不接受答案。
**想要改进此问题？**添加详细信息并通过editing this post阐明问题。

2天前关闭。
Improve this question
我有一个对齐的问题，我想并排3个框，但第一个框和最后一个框应该出现在一半，例如;
enter image description here
'

<section class="product-new">
            <div class="product-container">
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>
                <div class="product-card">
                </div>

        </section>

css

来源：https://stackoverflow.com/questions/74881264/i-am-trying-to-make-half-boxes-but-how-can-i-show-half-boxes

1条答案

按热度按时间

bq9c1y661#

我做了这个。这样看起来就像你要的：https://codepen.io/d3fco/pen/VwBYgoq
有一些有用的文档：
https://gridbyexample.com/examples/
我希望它能有所帮助，这只是一个解决方案，但有一吨的替代方案在那里。
在您情况下，它可能是一个示例html：

<div class="wrapper">
   <div class="product-card a">A</div>
   <div class="product-card b">B</div>
   <div class="product-card c">C</div>
</div>

和此Css：

body {
  margin: 100px;
  margin-left: -20%;
}

.wrapper {
  display: grid;
  grid-template-columns: 40% 40% 40%;
  grid-gap: 50px;
  background-color: #fff;
  color: #444;
  height: 300px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

赞(0）回复(0）举报 2022-12-24

我来回答

css 我正在尝试制作半盒，但如何显示半盒[已关闭]

1条答案

相关问题

热门标签

最新问答