Question

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

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

宽度：100vw; max-width：100vw！important;

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

此致

Answer 1

首先我建议你尝试display:flex和第二个：设计不能完全定制你必须更详细地描述你的问题...我建议使用bootstrap类或其他一些网格类。 ..或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的一些示例。

响应div

2 个答案: