Question

我正在尝试创建一个响应式照片库，但是我既不能改变盒子的高度也不能改变宽度。

我能够固定其宽度，并将样式属性添加到html，但它也不能同时用于高度。

我已经读过很多关于高度问题的文章，但对我来说却无济于事，有人建议使用绝对位置而不是相对位置，但这会破坏我的布局。似乎无法理解我在做什么，有人可以帮助我吗？！

这是我的代码：

.container {
  position: relative;
  width: 100%;
  margin-top: 5%;
  background-color: #203B5B;
  padding: 1% 1% 0% 1%;
  height: 100%;
}

.container:after {
  content: '';
  display: inline-block;
  width: 100%;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
}

.box {
  margin-top: 0%;
  height: 20%;
  padding-bottom: 90%;
  position: relative;
  float: left;
  cursor: default;
  overflow: hidden;
}

.box:after {
  content: '';
  position: absolute;
  cursor: default;
  background-color: #000;
  margin-left: 0%;
  margin-top: 6%;
  opacity: 0;
  z-index: 55;
  width: 50%;
  height: 72.5%;
  -webkit-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -ms-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;
}

.box:hover::after {
  background-color: #000;
  opacity: .7;
}

.container .box .caption {
  position: absolute;
  z-index: 60;
  width: 45%;
  margin-left: 2.5%;
  top: 40%;
  -webkit-transform: scale(3);
  -moz-transform: scale(3);
  -ms-transform: scale(3);
  -o-transform: scale(3);
  transform: scale(3);
  text-align: center;
  -webkit-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -ms-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;
  font: 90% montserrat, sans-serif;
  color: #fff;
  opacity: 0;
}

.box:hover .caption {
  -webkit-transform: scale(1) translate(0%, -50%);
  -moz-transform: scale(1) translate(0%, -50%);
  -ms-transform: scale(1) translate(0%, -50%);
  -o-transform: scale(1) translate(0%, -50%);
  transform: scale(1) translate(0%, -50%);
  opacity: 1;
}

.box img {
  position: absolute;
  left: 50%;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.86);
  border-width: 3.5px;
  outline-style: solid;
  outline-width: 5px;
  outline-color: #182D46;
  cursor: pointer;
  top: 37%;
  height: 70%;
  width: 95%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 50;
  -webkit-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -ms-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;
}

.box:hover img {
  height: 70%;
}

<div class="container">
  <div class="box" style="width:14.6%;">
    <div class="caption">1</div>
    <a href=""><img src="1.jpg" width="495" height="533" alt="" /></a>
  </div>

  <div class="box" style="width:14.6%;">
    <div class="caption">2</div>
    <a href=""><img src="2.png" width="495" height="533" alt="" /></a>
  </div>

  <div class="box" style="width:14.6%; ">
    <div class="caption">3</div>
    <a href="NAM.html"><img src="3.jpg" width="495" height="533" alt="" /></a>
  </div>

  <div class="box" style="width:14.6%">
    <div class="caption">4</div>
    <a href=""><img src="4.png" width="495" height="533" alt="" /></a>
  </div>

  <div class="box" style="width:14.6%">
    <div class="caption">5</div>
    <a href=""><img src="5.png" width="495" height="533" alt="" /></a>
  </div>

  <div class="box" style="width:14.6%">
    <div class="caption">6</div>
    <a href=""><img src="6.png" width="495" height="533" alt="" /></a>
  </div>

  <div class="box" style="width:14.6%">
    <div class="caption">7</div>
    <a href="Titti Smeriglio.html"><img src="7.png" width="495" height="533" alt="" /></a>
  </div>
</div>

谢谢！

Answer 1

如果您以百分比设置box div的宽度和高度，则它占父级的x％。在这种情况下，container格。在这种情况下，其宽度和高度也按百分比设置。但是您尚未为其父项<body>设置宽度和高度。并且<body>以<html>作为其父对象。

因此，可以为container div定义一个固定的高度和宽度，或者为<body>和<html>定义一个宽度和高度，如下所示：

html, 
body {
    width: 100%;
    height: 100%;
}

代码段

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  position: relative;
  width: 100%;
  margin-top: 5%;
  background-color: #203B5B;
  padding: 1% 1% 0% 1%;
  height: 100%;
}

.box {
  width: 14.25%;
  height: 50%;
  position: relative;
  float: left;
  cursor: default;
  overflow: hidden;
}

.box img {
  border: 3.5px solid rgba(255, 255, 255, 0.86);
  cursor: pointer;
  width: 100%;
}

<div class="container">
  <div class="box">
    <div class="caption">1</div>
    <a href=""><img src="https://www.fillmurray.com/640/360" /></a>
  </div>
  <div class="box">
    <div class="caption">2</div>
    <a href=""><img src="https://www.fillmurray.com/640/360" /></a>
  </div>
  <div class="box">
    <div class="caption">3</div>
    <a href=""><img src="https://www.fillmurray.com/640/360" /></a>
  </div>
  <div class="box">
    <div class="caption">4</div>
    <a href=""><img src="https://www.fillmurray.com/640/360" /></a>
  </div>
  <div class="box">
    <div class="caption">5</div>
    <a href=""><img src="https://www.fillmurray.com/640/360" /></a>
  </div>
  <div class="box">
    <div class="caption">6</div>
    <a href=""><img src="https://www.fillmurray.com/640/360" /></a>
  </div>
  <div class="box">
    <div class="caption">7</div>
    <a href=""><img src="https://www.fillmurray.com/640/360" /></a>
  </div>
</div>

为什么我不能改变盒子的高度？

1 个答案: