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

Posted 2023-03-06

【中文标题】如何使用可变列表项制作 div 的移动响应高度？

【英文标题】：How to make mobile responsive height of a div with variable list items?

【发布时间】：2021-07-10 08:28:21

【问题描述】：

我创建了一个 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"] 是显示每个产品的星级的简码。

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

【参考方案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;
  

【参考方案2】：

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

【讨论】：

请提供更多反馈并提供具体示例，这些示例可以完全解决用户提出的问题，或者至少让他走上一条更好的道路来解决他们的问题 - 感谢您的第一次贡献！