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

我已经创建了一个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>

这是我添加代码的示例URL。 [yasr_totall_rating size=“medium”]是显示每个产品星级的快捷代码

---

请打开窗口并尝试更改屏幕大小。

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

您必须在css中添加媒体查询，并使项目在移动设备上全宽/无浮动

比如：

@仅媒体屏幕和（最大宽度：600px）{
.检查价格，.顶星{
宽度：100%；
浮动：无；
明确：两者皆有；
边缘底部：20px；
}
.top star div，#评级文本{
文本对齐：居中；
}
}

请提供更多反馈，并提供具体示例，这些示例可以完全解决用户提出的问题，或者至少为用户提供更好的解决问题的途径-感谢您的第一次贡献！

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