【问题标题】:Make responsive all the content inside a div响应 div 内的所有内容
【发布时间】:2018-03-12 16:28:53
【问题描述】:

我正在尝试响应 div 中的所有内容。 内容可以是动态的(带有填充和/或边距的表格、表格内的表格、div、文本等)。我搜索了很多,但没有找到好的解决方案(例如:How to make div's inside div responsive

使用 CSS 或 JS 的解决方案并不重要。最好的解决方案是尝试将此属性添加到 de div 中的所有元素:

宽度:100vw;最大宽度:100vw !important;

但不适用于所有情况。有谁能够帮我? 非常感谢!

问候

【问题讨论】:

    标签: javascript html css


    【解决方案1】:

    首先我建议你尝试display:flex,第二个:设计不能完全定制你必须更详细地描述你的问题......我建议使用引导类或其他一些网格类......或display:grid

    【讨论】:

      【解决方案2】:

      .wrapper div{
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
      }
      .wrapper{
        overflow: hidden;
      }
      #one{
        float: left;
        width: 50%;
        
      }
      #two{
        overflow: hidden;
      }
      /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
      @media only screen and (min-width: 320px) and (max-width: 568px) {
        #one, #two{
          width: 100%;
        }
      }
      /* ----------- iPhone 6, 6S, 7 and 8 ----------- */
      @media only screen and (min-device-width: 375px)  and (max-device-width: 667px){
        #one, #two{
          width: 100%;
        }
      }
      /* ----------- iPhone 6+, 7+ and 8+ ----------- */
      @media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
        #one, #two{
          width: 100%;
        }
      }
      /* ----------- iPad 1, 2, Mini and Air ----------- */
      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        #one, #two{
          width: 100%;
        }
      }
      /* ----------- Samsung S8 ----------- */
      @media screen and (device-width: 360px) and (device-height: 740px) {
        #one, #two{
          width: 100%;
        }
      }
      /* ----------- Google Nexus 6 ----------- */
      @media screen and (device-width: 412px) and (device-height: 732px) {
        #one, #two{
          width: 100%;
        }
      }
      <div class="wrapper">
        <div id="one">
          <p style="text-align: center;"><span style="color: #339966;"><a href="https://alfredclouet.fr/index.php/regime-sans-lactose/product/listing/72-sans-gluten" style="color: #339966;"><span style="font-size:18px; font-weight: bold;"><span style="color: #d7901d;">Regime Sans Gluten </span><img src="https://alfredclouet.fr/images/AC-Regimes-LOGO/gluten-free.png" alt="gluten free" width="30" height="30"></span></a></span></p>
        </div>
        <div id="two">
          <p style="text-align: center;"><a href="https://alfredclouet.fr/index.php/regime-sans-lactose/product/listing/73-sans-lactose"><span style="color: #ffcc00; font-size: 18px; font-weight: bold;"><span style="color: #92d9f8;">Regime Sans Lactose </span><img src="https://alfredclouet.fr/images/AC-Regimes-LOGO/lactose-free.png" alt="lactose free" width="30" height="30"></span></a></p>
        </div>
      
      <div class="wrapper">
        <div id="one">
          <p style="text-align: center;"><span style="color: #339966;"><a href="https://alfredclouet.fr/index.php/regime-sans-lactose/product/listing/72-sans-gluten" style="color: #339966;"><span style="font-size:18px; font-weight: bold;"><span style="color: #d7901d;">Regime Sans Gluten </span><img src="https://alfredclouet.fr/images/AC-Regimes-LOGO/gluten-free.png" alt="gluten free" width="30" height="30"></span></a></span></p>
        </div>
        <div id="two">
          <p style="text-align: center;"><a href="https://alfredclouet.fr/index.php/regime-sans-lactose/product/listing/73-sans-lactose"><span style="color: #ffcc00; font-size: 18px; font-weight: bold;"><span style="color: #92d9f8;">Regime Sans Lactose </span><img src="https://alfredclouet.fr/images/AC-Regimes-LOGO/lactose-free.png" alt="lactose free" width="30" height="30"></span></a></p>
        </div>
      </div>

      这是 div 中响应式 div 的一些示例。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2015-04-28
        • 2012-09-19
        • 1970-01-01
        • 2018-12-25
        • 1970-01-01
        • 2016-05-14
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多