使div中的所有内容响应

Question

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

CSS或JS解决方案都没关系。 最好的解决方案是尝试将此属性添加到de div中的所有元素：

宽度：100vw; 最大宽度：100vw！重要;

但是，并非在所有情况下都有效。 有谁能够帮助我？ 非常感谢你！

问候

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