html - HTML tile 中元素的响应式定位

Question

我正在构建一个平铺网页，将平铺的位置调整为屏幕大小。目前一切都很好，标题和图像位于每个图 block 的中心。我想添加一个输入框，但想将此元素和其他元素放置在图 block 中。我可以通过绝对定位来做到这一点，但是在调整屏幕大小时，输入框不会随图 block 一起移动。我该怎么做。

body {
  text-align: center;
  background-color: #000000;
}

* {
  box-sizing: border-box;
}

[class*="col-"] {
  float: left;
  padding: 5px;
}


/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-4 {
    width: 33.33%;
  }
  .col-m-5 {
    width: 41.66%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-7 {
    width: 58.33%;
  }
  .col-m-8 {
    width: 66.66%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-10 {
    width: 83.33%;
  }
  .col-m-11 {
    width: 91.66%;
  }
  .col-m-12 {
    width: 100%;
  }
}

.DTile {
  border: 2px solid blue;
  background-color: #808080;
  height: 200px;
}

.DGauge {
  font-size: 350%;
  color: #0000CD;
}

.DTitle {
  color: #0000CD;
  font-size: 150%;
}

.DsetTemp {
  position: absolute;
  left: 150px;
  top: 150px;
}

.NTile {
  border: 2px solid #7CFC00;
  background-color: #808080;
  height: 200px;
}

.NGauge {
  font-size: 350%
}

.Ntitle {
  color: #0000CD;
  font-size: 150%;
}

.FTile {
  border: 2px solid yellow;
  background-color: #808080;
  height: 200px;
}

.FGauge {
  font-size: 350%
}

.FTitle {
  color: #0000CD;
  font-size: 150%;
}

.HTile {
  border: 2px solid #7CFC00;
  background-color: #808080;
  height: 200px;
}

.HGauge {
  font-size: 350%
}

.HTitle {
  color: #0000CD;
  font-size: 150%;
}

<div class="row">
  <div class="col-3">
    <div class="DTile">
      <p class="DTitle"> The Den</p>
      <div class="DGauge" id="Dtemp"></div>
      <img src="" id="Dicon" width="80px" height="30px" vspace="10">
      <input class="DsetTemp" type="text" id="DsetTemp" value="" size="2">
    </div>
  </div>
  <div class="col-3">
    <div class="FTile">
      <p class="FTitle"> Front room</p>
      <div class="FGauge" id="Ftemp"></div>
      <img src="" id="Ficon" width="80px" height="30px" vspace="10">
    </div>
  </div>
  <div class="col-3">
    <div class="HTile">
      <p class="HTitle"> Hallway</p>
      <div class="HGauge" id="Htemp"></div>
      <img src="" id="Hicon" width="80px" height="30px" vspace="10">
    </div>
  </div>
  <div class="col-3">
    <div class="NTile">
      <p class="NTitle"> Niamh Room</p>
      <div class="NGauge" id="Ntemp"></div>
      <img src="" id="Nicon" width="80px" height="30px" vspace="10">
    </div>
  </div>
</div>

我添加了我实际页面的 Jpeg 图像。前厅瓷砖具有三个并排放置的元素。这就是我想要创建的

Answer 1

检查 Flexbox documentation

$(document).ready(function() {
  $("#btn").click(function() {
    $("#Create").toggle();
  });
});

body {
  text-align: center;
  background-color: #000000;
}

* {
  box-sizing: border-box;
}

[class*="col-"] {
  float: left;
  padding: 5px;
}


/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-4 {
    width: 33.33%;
  }
  .col-m-5 {
    width: 41.66%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-7 {
    width: 58.33%;
  }
  .col-m-8 {
    width: 66.66%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-10 {
    width: 83.33%;
  }
  .col-m-11 {
    width: 91.66%;
  }
  .col-m-12 {
    width: 100%;
  }
}

.DTile {
  border: 2px solid blue;
  background-color: #808080;
  height: 200px;
}

.DGauge {
  font-size: 350%;
  color: #0000CD;
}

.DTitle {
  color: #0000CD;
  font-size: 150%;
}

.DsetTemp {
  width: 80%;
}

.NTile {
  border: 2px solid #7CFC00;
  background-color: #808080;
  height: 200px;
}

.NGauge {
  font-size: 350%
}

.Ntitle {
  color: #0000CD;
  font-size: 150%;
}

.FTile {
  border: 2px solid yellow;
  background-color: #808080;
  height: 200px;
}

.FGauge {
  font-size: 350%;
}

.DRandom {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: auto;
}

.DRandom-1 {
  flex: 1;
  margin: auto;
  border: 1px solid red;
}

.DRandom-2 {
  flex: 1;
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  margin: auto;
  /* width:100% */
}

.DRandom-2 button {
  /* flex:1; */
  /* width:20%; */
}

.DRandom-2 input {
  flex: 1;
}

.FTitle {
  color: #0000CD;
  font-size: 150%;
}

.HTile {
  border: 2px solid #7CFC00;
  background-color: #808080;
  height: 200px;
}

.HGauge {
  font-size: 350%
}

.HTitle {
  color: #0000CD;
  font-size: 150%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="testStyles.css">
</head>

<body>
  <div class="row">
    <div class="col-3">
      <div class="DTile">
        <p class="DTitle"> The Den</p>
        <div class="DGauge" id="Dtemp"></div>
        <div class="DRandom">
          <div class="DRandom-1">
            <img src="" id="Dicon" width="80px" height="30px" vspace="10">
          </div>

          <div class="DRandom-2">
            <button id="btn">
      Button
      </button>
            <input id="Create" class="DsetTemp" type="text" id="DsetTemp" value="" />
          </div>

        </div>

      </div>
    </div>
    <div class="col-3">
      <div class="FTile">
        <p class="FTitle"> Front room</p>
        <div class="FGauge" id="Ftemp"></div>
        <img src="" id="Ficon" width="80px" height="30px" vspace="10">
      </div>
    </div>
    <div class="col-3">
      <div class="HTile">
        <p class="HTitle"> Hallway</p>
        <div class="HGauge" id="Htemp"></div>
        <img src="" id="Hicon" width="80px" height="30px" vspace="10">
      </div>
    </div>
    <div class="col-3">
      <div class="NTile">
        <p class="NTitle"> Niamh Room</p>
        <div class="NGauge" id="Ntemp"></div>
        <img src="" id="Nicon" width="80px" height="30px" vspace="10">
      </div>
    </div>
  </div>
</body>

</html>