Question

我有display:inline-block的3个div。每个div设置宽度为30％，高度为75％。问题是宽度大于高度，我希望它是相同的（1：1）。我可以只通过CSS来解决它吗？

＆＃13;

#our_services {
    height: 350px;
    text-align: center;
    font-family:"open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
    color: black;
    background-color: rgb(224, 224, 224);
    overflow: auto;
    margin: auto;
}
#try {
    background-color: rgb(224, 224, 224);
    width:60%;
    height:70%;
    margin:auto;
}
#product1 {
    width: 30%;
    height: 75%;
    position: relative;
    background-color:green;
    display:inline-block;
    /* margin:5px; */
    border: 0px;
}
#product2 {
    width: 30%;
    height: 75%;
    background-color:orange;
    display:inline-block;
    /* margin:5px; */
    border: 0px;
}
#product3 {
    width: 30%;
    height: 75%;
    background-color:blue;
    display:inline-block;
    /* margin:5px; */
}

＆＃13;

<div id="our_services" class="container">
    <h1></h1>
    <div id="try">
        <div id="product1"></div>
        <div id="product2"></div>
        <div id="product3"></div>
    </div>
</div>

＆＃13;

Answer 1

试试这个。宽度和高度相同。

#try{
background-color: rgb(224,224,224);
width:60%;
height:60%;
margin:auto;
}

Answer 2

如果你想将比例（1：1）设置为方形，请尝试使用css技巧：

.wrap {
  overflow: hidden;
}
.square {
  width: 33%;
  height: 0;
  padding-bottom: 33%;
  float: left;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}

<div class="wrap">
  <div class="square red"></div>
  <div class="square blue"></div>
  <div class="square green"></div>
</div>

将高度设置为0，将宽度和padding-bottom设置为相同的值。

如何使div的高度等于宽度

2 个答案: