时间戳

首页 > 解决方案 > 调整窗口大小时右 div 消失

html - 调整窗口大小时右 div 消失

问题描述

我有两个 div 有点像 50 50 分割的屏幕，所以它在计算机大小的屏幕和手机屏幕上看起来不错，但在这两者之间，正确的 div 消失了，我无法弄清楚。

最初代码在 php 中回显，信息来自数据库，所以我在这里放了一些虚拟信息。

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Heebo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  padding: 72px 0 0 0;
  overflow: hidden;
}


/*style for the slider container*/

.slidercon {
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  float: left;
  display: table;
}

.maincon {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

.imgslider {
  margin: auto;
  max-width: 560px;
  max-height: 315px;
  overflow: hidden;
  position: relative;
}

.imgslider>ul {
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  transition: 0.2s;
  width: 100%;
}

.imgslider>ul>li {
  list-style-type: none;
  min-width: 560px;
  overflow: hidden;
}

.imgdiv {
  width: 100%;
  height: 315px;
  justify-content: center;
  text-align: center;
}

.imgdiv>img {
  width: auto;
  max-height: 315px;
}

.youtubevid {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
}


/*style for the dots*/

.dotsContainer {
  text-align: center;
}

.dots {
  cursor: pointer;
  height: 20px;
  width: 20px;
  margin: 5px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dots:first-child {
  background: white;
  border: 1px solid grey;
  ;
}


/*content style*/

.content {
  float: right;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  display: table;
  text-align: right;
}

.innercont {
  /* padding: 15px; */
  direction: rtl;
  display: table-cell;
  vertical-align: middle;
}

.innercont>span:first-child {
  font-size: 40px;
  padding: 25px;
  display: block;
}

.innercont>span:nth-child(2) {
  padding: 25px;
  font-size: 20px;
  display: block;
  word-wrap: break-word;
}

.price {
  padding: 10px;
  font-size: 22px;
}

.price>span {
  margin: 0 15px;
}

.price>span:nth-child(2) {
  float: left;
}


/*style for the phone number input*/

.PhoneN-section {
  position: relative;
  height: 50px;
  margin: 15px;
}

.PhoneN-section input {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  outline: none;
  border: 1px solid rgb(230, 230, 230);
  font-size: 20px;
  padding: 10px 10px 0 10px;
  text-align: left;
  direction: ltr;
}

input:focus~.PhoneN-label .label-content,
input:valid~.PhoneN-label .label-content {
  transform: translateY(-120%);
}

label:not([for="checkbox"]) {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.label-content {
  font-size: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  transition: all 0.3s ease;
  background: white;
}

input:focus {
  border: 2px solid rgb(76, 240, 0);
  transition-delay: 0.2s;
}


/*style for the submit button*/

.phone-submit {
  height: 50px;
  margin: 15px 0;
}

.phone-submit button {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  border-radius: 10px;
  color: white;
  background: rgb(76, 240, 0);
  cursor: pointer;
  font-size: 20px;
}


/*style for the exclamation message*/

.mark {
  float: right;
  margin: 0 5px;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 50%;
  border: 1px solid grey;
}

.messaget {
  color: grey;
}

@media screen and (max-width: 850px) {
  body {
    overflow-y: auto;
  }
  .slidercon {
    width: unset;
    height: unset;
    float: unset;
    display: block;
  }
  .maincon {
    display: block;
  }
  .content {
    float: none;
    width: unset;
    height: 100vh;
    display: block;
  }
  .innercont {
    display: block;
  }
}

@media screen and (max-width: 550px) {
  .imgdiv {
    justify-content: unset;
    text-align: unset;
  }
  .imgdiv>img {
    margin: 0 20%;
  }
}

@media only screen and (max-width: 550px) {
  .imgdiv>img {
    margin: 0 10%;
  }
}

@media only screen and (max-width: 420px) {
  .imgdiv>img {
    margin: 0 7%;
  }
}

@media only screen and (max-width: 400px) {
  .imgdiv>img {
    margin: 0 5%;
  }
}
<div class="slidercon">
  <div class="maincon">
    <div class="imgslider">
      <ul>
        <li>
          <div class="imgdiv">
            <img src="img" alt="item">
          </div>
        </li>
        <li>
          <div class="youtubevid">
            <iframe style="position:absolute;width:100%;height:100%;" src="link" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        </li>';
      </ul>
    </div>
    <div class="dotsContainer">
      <span class="dots"></span>
      <span class="dots"></span>
    </div>
  </div>
</div>
<div class="content">
  <div class="innercont">
    <span>'Type'</span>
    <span>'Description'</span>
    <div class="price">
      <span>Price</span>
      <span>'1,111' &#8362;</span>
    </div>
    <form action="includes/sendPhone.php" method="POST">
      <div class="PhoneN-section">
        <input type="text" name="PhoneN" autocomplete="off" required />
        <input type="hidden" name="itemid" value="id" />
        <input type="hidden" name="itemtype" value="TYPE" />
        <input type="hidden" name="price" value="1,111" />
        <label for="PhoneN" class="PhoneN-label">
                <span class="label-content">Phone Number</span>
              </label>
        <div class="phone-submit">
          <button type="submit" name="phone-submit">SEND</button>
        </div>
        <span>
                <span class="mark">!</span>
        <span class="messaget">BLa lbla bla bla bla bla bla bla bla blab la</span>
        </span>
      </div>
    </form>
  </div>
</div>

标签： htmlcss

解决方案

原因是max-width: 560px; 在.imgslider类中。我添加了 50vw，然后它工作正常。

.imgslider {
    margin: auto;
    max-width: 50vh; /* updated */
    max-height: 315px;
    overflow: hidden;
    position: relative;
}

试试下面，它正在工作......

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Heebo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    padding: 72px 0 0 0;
    overflow: hidden;
}


/*style for the slider container*/

.slidercon {
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    float: left;
    display: table;
}

.maincon {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

.imgslider {
    margin: auto;
    max-width: 50vh; /* updated line */
    max-height: 315px;
    overflow: hidden;
    position: relative;
}

.imgslider > ul {
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    transition: 0.2s;
    width: 100%;
}

.imgslider > ul > li {
    list-style-type: none;
    min-width: 560px;
    overflow: hidden;
}

.imgdiv {
    width: 100%;
    height: 315px;
    justify-content: center;
    text-align: center;
}

.imgdiv > img {
    width: auto;
    max-height: 315px;
}

.youtubevid {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
}


/*style for the dots*/

.dotsContainer {
    text-align: center;
}

.dots {
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: 5px 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dots:first-child {
    background: white;
    border: 1px solid grey;;
}


/*content style*/

.content {
    float: right;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    display: table;
    text-align: right;
}

.innercont {
    /* padding: 15px; */
    direction: rtl;
    display: table-cell;
    vertical-align: middle;
}

.innercont > span:first-child {
    font-size: 40px;
    padding: 25px;
    display: block;
}

.innercont > span:nth-child(2) {
    padding: 25px;
    font-size: 20px;
    display: block;
    word-wrap: break-word;
}

.price {
    padding: 10px;
    font-size: 22px;
}

.price > span {
    margin: 0 15px;
}

.price > span:nth-child(2) {
    float: left;
}


/*style for the phone number input*/

.PhoneN-section {
    position: relative;
    height: 50px;
    margin: 15px;
}

.PhoneN-section input {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    outline: none;
    border: 1px solid rgb(230, 230, 230);
    font-size: 20px;
    padding: 10px 10px 0 10px;
    text-align: left;
    direction: ltr;
}

input:focus ~ .PhoneN-label .label-content,
input:valid ~ .PhoneN-label .label-content {
    transform: translateY(-120%);
}

label:not([for="checkbox"]) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.label-content {
    font-size: 20px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    transition: all 0.3s ease;
    background: white;
}

input:focus {
    border: 2px solid rgb(76, 240, 0);
    transition-delay: 0.2s;
}


/*style for the submit button*/

.phone-submit {
    height: 50px;
    margin: 15px 0;
}

.phone-submit button {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    border-radius: 10px;
    color: white;
    background: rgb(76, 240, 0);
    cursor: pointer;
    font-size: 20px;
}


/*style for the exclamation message*/

.mark {
    float: right;
    margin: 0 5px;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 50%;
    border: 1px solid grey;
}

.messaget {
    color: grey;
}

@media screen and (max-width: 850px) {
    body {
        overflow-y: auto;
    }

    .slidercon {
        width: unset;
        height: unset;
        float: unset;
        display: block;
    }

    .maincon {
        display: block;
    }

    .content {
        float: none;
        width: unset;
        height: 100vh;
        display: block;
    }

    .innercont {
        display: block;
    }
}

@media screen and (max-width: 550px) {
    .imgdiv {
        justify-content: unset;
        text-align: unset;
    }

    .imgdiv > img {
        margin: 0 20%;
    }
}

@media only screen and (max-width: 550px) {
    .imgdiv > img {
        margin: 0 10%;
    }
}

@media only screen and (max-width: 420px) {
    .imgdiv > img {
        margin: 0 7%;
    }
}

@media only screen and (max-width: 400px) {
    .imgdiv > img {
        margin: 0 5%;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack Overflow</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<html>
<body>
<div class="slidercon">
    <div class="maincon">
        <div class="imgslider">
            <ul>
                <li>
                    <div class="imgdiv">
                        <img src="img" alt="item">
                    </div>
                </li>
                <li>
                    <div class="youtubevid">
                        <iframe style="position:absolute;width:100%;height:100%;" src="link" frameborder="0"
                                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen></iframe>
                    </div>
                </li>
            </ul>
        </div>
        <div class="dotsContainer">
            <span class="dots"></span>
            <span class="dots"></span>
        </div>
    </div>
</div>
<div class="content">
    <div class="innercont">
        <span>'Type'</span>
        <span>'Description'</span>
        <div class="price">
            <span>Price</span>
            <span>'1,111' &#8362;</span>
        </div>
        <form action="includes/sendPhone.php" method="POST">
            <div class="PhoneN-section">
                <input type="text" name="PhoneN" autocomplete="off" required/>
                <input type="hidden" name="itemid" value="id"/>
                <input type="hidden" name="itemtype" value="TYPE"/>
                <input type="hidden" name="price" value="1,111"/>
                <label class="PhoneN-label">
                    <span class="label-content">Phone Number</span>
                </label>
                <div class="phone-submit">
                    <button type="submit" name="phone-submit">SEND</button>
                </div>
                <span>
                <span class="mark">!</span>
        <span class="messaget">BLa lbla bla bla bla bla bla bla bla blab la</span>
        </span>
            </div>
        </form>
    </div>
</div>
</body>
</html>
</html>

推荐阅读