如何使用可变列表项使 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

我不确定这在 Wordpress 中如何工作，但对于使用 HTML5 和 CSS 创建的响应式网页，您需要在 HTML 的头部添加元标记文档：这与 CSS 中的媒体查询一起使用，这将使您的页面响应来自移动设备、笔记本电脑和台式机的任何设备和尺寸屏幕。这是通过@media 完成的，然后是您需要的设备的屏幕尺寸。

Answer 2

您必须在 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;
  }
}

如何使用可变列表项使 div 的移动响应高度？

How to make mobile responsive height of a div with variable list items?

html

css

wordpress

mobile