主页 / 问题 / 1547265
Accepted
Aноним
Asked:2023-10-22 17:49:31 +0800 CST2023-10-22 17:49:31 +0800 CST

如何制作这样一个两列块？

  • 772

在此输入图像描述[！[

.section__product-items {
column-count: 2;
width: 900px;

}
<div class="section__product-items">
    <div class="section__product-item">
        <img src="" alt="">
    <h4 class="product__name">Vicaragua Coffee Beans</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Espresso Ristretto</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Ethiopia Coffee</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Vicaragua Coffee Beans</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
<img src="" alt="">
<h4 class="product__name">Espresso Ristretto</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
<img src="" alt="">
<h4 class="product__name">Ethiopia Coffee</h4>
<span class="product__cost"></span>    
</div>

</div>

] 2 ] 2

css3

1 个回答

  1. Best Answer

    我提前为这个例子的令人毛骨悚然表示歉意……但如果你想不出更好的办法，也许我的选择会适合你。PS最好在电脑上观看并将结果扩展到整页

    body {
  background-color: gold;
}

.container {
  width: 900px;
  height: auto;
  position: relative;
  margin: auto;
}

.block1 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 20px;
  left: 20px;
}

.circle1 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block2 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 20px;
  right: 20px;
}

.circle2 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_2 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_2 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block3 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 120px;
  left: 20px;
}

.circle3 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_3 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_3 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block4 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 120px;
  right: 20px;
}

.circle4 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_4 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_4 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block5 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 220px;
  left: 20px;
}

.circle5 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_5 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_5 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block6 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 220px;
  right: 20px;
}

.circle6 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_6 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_6 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}
    <div class="container">
  <div class="block1">
    <div class="circle1"></div>
    <p class="text1">Vicaragua Coffee Beans</p>
    <p class="text2">$29</p>
  </div>
  <div class="block2">
    <div class="circle2"></div>
    <p class="text1_2">Vicaragua Coffee Beans</p>
    <p class="text2_2">$29</p>
  </div>
  <div class="block3">
    <div class="circle3"></div>
    <p class="text1_3">Vicaragua Coffee Beans</p>
    <p class="text2_3">$29</p>
  </div>
  <div class="block4">
    <div class="circle4"></div>
    <p class="text1_4">Vicaragua Coffee Beans</p>
    <p class="text2_4">$29</p>
  </div>
  <div class="block5">
    <div class="circle5"></div>
    <p class="text1_5">Vicaragua Coffee Beans</p>
    <p class="text2_5">$29</p>
  </div>
  <div class="block6">
    <div class="circle6"></div>
    <p class="text1_6">Vicaragua Coffee Beans</p>
    <p class="text2_6">$29</p>
  </div>
</div>

    • 0

相关问题