Question

我正在构建一个平铺网页，它会将图块的位置调整为屏幕大小。目前，一切都运行良好，标题和图像集中在每个瓷砖。我想添加一个输入框，但想将此元素和其他元素放在图块中。我可以通过绝对定位来做到这一点，但是当调整屏幕大小时，输入框不会随着平铺移动。我怎么能这样做呢。

main.cpp:
#include "Date.h"

int main()
{
int day = 1;
int month = 1;
int year = 2000;
int addedDays;

displayDate(day, month, year);
cout << "Enter how many days you would like to add:  ";
cin >> addedDays;
cout << endl;
setDate(day, month, year);
addDays(day, month, year, addedDays);
displayDate(day, month, year);

return 0;}
//====================================
Date.cpp
#include "Date.h"

Date::Date(){}
Date::Date(int day, int month, int year) 
{
this->day = day;
this->month = month;
this->year = year;
}

Date::~Date() {}

void Date::setDate(int day, int month, int year)
{
this->day = day;
this->month = month;
this->year = year;
}

void Date::addDays(int day, int month, int year, int addedDays)
{
day = day + addedDays;
while (day > 30)        //Test if day function needs to be cycled.
{
    month++;
    day = day - 30;
    if(month>12)        //Test if month function needs to be cycled.
    {
        year++;
        month = month - 12;
    }
}
}

void Date::displayDate(int day, int month, int year)
{
cout << "The current date is:  " << day << ", " << month << ", " << year << endl;
}
//======================================
Date.h:
#include "stdafx.h"
#include<iostream>
using namespace std;

class Date
{
private:
        int year;
        int month;
        int day;

public:
    Date();
    Date(int day, int month, int year);
    ~Date();
    void setDate(int day, int month, int year);
    void addDays(int day, int month, int year, int addedDays);
    void displayDate(int day, int month, int year);
};

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%;
}

我添加了我实际页面的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>

在HTML磁贴中响应元素的响应定位

1 个答案: