主页 / 问题 / 793895
Accepted
Новиков Максим
Asked:2020-03-05 20:01:15 +0000 UTC2020-03-05 20:01:15 +0000 UTC

3 个橡胶方形 div

  • 772

大家好！我正在布置布局，出现以下问题：如何将 3 个 square排成一行，以便div在background-image调整浏览器窗口大小时，它们也会改变大小，但保持正方形并排成一排？

我是这样做的，但是，当浏览器窗口发生变化时，第二张图片会在其左侧留下一个小空间。

.wrapper {
    width: calc(100% / 3);
    background-color: aqua;
    float: left;
    }

.imagesLineLINK {
    padding-top: 50%;
    padding-bottom: 50%;
    background-color: #5B0FA1;
    background-image: url(right-arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 13%;
}

.bridgeIMG {
    padding-top: 50%;
    padding-bottom: 50%;
    background-image: url(bridge.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.girlIMG {
    padding-top: 50%;
    padding-bottom: 50%;
    background-image: url(girl.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
<div class="wrapper">
    <div class="imagesLineLINK"></div>
</div>
<div class="wrapper">
    <div class="bridgeIMG"></div>
</div>
<div class="wrapper">
    <div class="girlIMG"></div>
</div>

怎么修？还有其他选择吗？

html

2 个回答

  1. 像这样的事情可以用 flexbox 来完成

    .row{
  display:flex;
  flex-direction:row;
}
.box{
 
  padding:0 15px;
}
.bg_img{
  background: url('http://www.gogetnews.info/uploads/posts/2016-11/1479033917_marsohod-nasa-obnaruzhil-na-krasnoy-planete-nebolshoy-metallicheskiy-shar-foto.jpg');
  width: 200px;
  height:200px;
  background-size:cover;
}
    <div class="row">
    <div class="box">
      <div class="bg_img">
      
      </div>
    </div>
    <div class="box">
      <div class="bg_img">
      
      </div>
    </div>
    <div class="box">
      <div class="bg_img">
      
      </div>
    </div>
</div>

    • 1
  2. Best Answer

    可以使用相对垂直填充功能（从父级的宽度计算）来实现方框。

    body{
  margin:0;
}
.image-block{
  box-sizing:border-box;
  width:calc(100% / 3);
  float:left;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding-top:calc(100% / 3);
}
.image1{
  background-image:url(https://img1.goodfon.ru/wallpaper/big/1/ca/foto-makro-kartinka-zelenye.jpg)
}
.image2{
  background-image:url(https://kartinki.detki.today/wp-content/uploads/2017/07/kartinka-dlya-detey-popugay.jpg)
}
.image3{
  background-image:url(https://www.sunhome.ru/i/wallpapers/200/planeta-zemlya-kartinka.960x540.jpg)
}
    <div class="image-block image1"></div>
<div class="image-block image2"></div>
<div class="image-block image3"></div>

    • -1

相关问题