如何使用可變列表項制作 div 的移動響應高度？

Question

我創建了一個 HTML 小部件，我打算在我的 WordPress 博客上的所有帖子上發布它。 小部件在瀏覽器上看起來不錯，但在移動屏幕上看起來有點不穩定。

<div class="top-box">
  <h3 id="box-heading">Our Verdict</h3>
  <p id="box-text">Considering its price point and the features it offers, the Sennheiser GSP 300 is absolutely a great choice. It might not serve
    like the top-notch gaming headsets (which are really expensive too), it will not leave you disappointed for sure. <br /><br />The headset is
    comfortable, sounds great, good-built, and is compatible with most platforms. With little cons like a non-detachable mic and no surround sound,
    it still beats some other beasts of a bit higher price points. The light-featured Sennheiser gaming headset is just right for action-packed
    gaming without burning a hole in your pocket.</p>
  <div class="Sub-box">
    <div class="sub-box-left"><span class="dashicons dashicons-yes-alt"> For</span>
      <ul id="sub-box-text">
        <li>Lightweight &amp; comfortable</li>
        <li>Crystal clear mic</li>
        <li>Great noise-cancelation</li>
        <li>Large volume dial</li>
      </ul>
    </div>
    <div class="sub-box-right"><span class="dashicons dashicons-dismiss"> Against</span>
      <ul id="sub-box-text">
        <li>Non-detachable microphone</li>
        <li>No surround-sound</li>
        <li>No chat-game audio balancer</li>
        <li>Cable can be a mess for console players</li>
      </ul>
    </div>
  </div>
  <div class="review-amazon">
    <div class="top-star">
      <p id="rating-text">Not On Top Rating</p>
      [yasr_overall_rating size="medium"]
    </div>
    <div class="check-price">
      <p class="price-check">Check Price</p>
      <a class="amazon-button" href="#">Check Price on Amazon</a>
    </div>
  </div>
</div>

css

.top-box {
  background-color: #ededed;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 25px;
  overflow: auto;
}

#box-heading {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  vertical-align: middle;
}

#box-text {
  font-size: 14px;
  line-height: 1.5em;
  margin-bottom: 10px;
  color: #333;
}

.sub-box-left {
  float: left;
  width: 50%;
  padding-left: 15px;
  border-right: 1px #fff dotted;
}

.sub-box-right {
  float: right;
  width: 50%;
  padding-left: 15px;
}

#sub-box-text {
  line-height: 1.5;
  list-style: none;
  margin-bottom: 1rem;
  margin: 0;
  padding: 0;
  padding-top: 25px;
  border: 0;
  font: inherit;
  font-size: 15px;
  padding-bottom: 20px;
}

.dashicons.dashicons-yes-alt,
.dashicons.dashicons-dismiss {
  width: 100%;
  text-align: left;
  color: black;
  font-weight: 500;
  font-size: 17px;
  line-height: 40px;
  text-transform: uppercase;
  vertical-align: middle;
}

p:empty:before {
  display: none;
}

#yasr-custom-text-before-overall {
  display: none;
}

.top-star {
  float: left;
  width: 50%;
}

.check-price {
  color: black;
  width: 50%;
  float: right;
  text-align: center;
}

.price-check {
  text-align: center;
}

#rating-text {
  text-align: left;
}

a.amazon-button {
  background-color: #5eaf16;
  padding: 7px;
  color: white;
  white-space: nowrap;
}

.review-amazon {
  padding-top: 20px;
}

.sub-box {
  padding-bottom: 10px;
}

https://notontop.com/review/headphone/sennheiser-gsp-300/

這是我添加代碼的示例 URL。 [yasr_overall_rating size="medium"] 是顯示每個產品星級的簡碼。

請打開 window 並嘗試更改屏幕尺寸。

Answer 1

您必須在 css 中添加媒體查詢，並在移動設備上制作全寬/無浮動的項目。

就像是：

@media only screen and (max-width: 600px) {
  .check-price, .top-star {
    width: 100%;
    float: none;
    clear: both;
    margin-bottom: 20px;
  }

  .top-star div,  #rating-text {
    text-align: center;
  }
}

Answer 2

I am not sure how this will work in Wordpress but for a responsive webpage created with HTML5 and CSS, you will need a meta tag at the head of the HTML document: This is used along with Media Queries in the CSS which will make your page響應來自移動設備、筆記本電腦和台式機的任何設備和尺寸的屏幕。 這是通過@media 完成的，然后是您需要的設備的尺寸屏幕。