响应 div 内的所有内容

Question

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

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

宽度：100vw；最大宽度：100vw !important;

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

问候

Answer 1

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

Answer 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 的一些示例。