如何在内联css中创建响应式布局？

Question

我正在为博客文章创建一个布局，所以一切都必须在INLINE CSS中。 问题是......它必须响应！

因此，在大型ecrans中，每行必须有两个具有相同宽度的块。 在小型ecrans中，它必须只有一个。 我真的不想使用bootstrap因为它在IE8上不起作用。 而且我认为媒体查询不能内联工作，或者我想知道吗？ 如果我是，你可以解释一下如何与他们合作吗？

你能帮我吗？

PS：你可以在这里看到我的“网站”：

  body{ font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; } 

  <div id="container" style="max-width:1164px; padding:0px 25px;"> <div id="sections" style="background-color:#e7f0f3; width:100%;"> <div id="house" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px; vertical-align:top;"> <div style="float:left; vertical-align:top;"> <h2 style="font-weight:bold; font-size:20px; display:inline-block;">Housing</h2> <ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;"> <li>Aluguer por m2 ou por bastidor ou por unidade de U</li> <li>Largura de banda de 10 Mbps até 1 Gbps</li> <li>Backup e/ou Storage centralizados</li> <li>Sala de Staging, cais de carga e descarga</li> </ul> </div> </div> <div id="disaster" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> <div style="float:left;"> <h2 style="font-weight:bold; font-size:20px; display:inline-block;">Suporte para Disaster Recovery</h2> <ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;"> <li>Housing Equipamentos Cold e Hot Stand-By</li> <li>Tape Vaulting</li> <li>Disponibilização de espaço de escritório para Disaster Recovery</li> <li>Consultodoria</li> <li>Serviços de ativação de desastre</li> </ul> </div> </div> <div id="house" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> <div style="float:left;"> <h2 style="font-weight:bold; font-size:20px; display:inline-block;">Administração de Sistemas</h2> <ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;"> <li>Análise e Desenho de procedimentos e de workflows</li> <li>Implementação de regras relativas à segurança da Informação do cliente</li> <li>Ferramentas e tecnologias operacionais de suporte</li> <li>Análise de desempenho dos sistemas</li> <li>Propostas de melhoria do desempenho dos sistemas</li> <li>Análise e recomendações de preços /desempenho relativamente a novas aquisições ou upgrades</li> <li>Carregamento, instalação e configuração de software</li> <li>Suporte a problemas de comunicações</li> <li>Coordenação, desenho e desenvolvimento de planos de suporte de acordo com as normas </li> <li>Coordenação de diferentes níveis de suporte de diferentes fornecedores</li> <li>Desenho e gestão de redes locais</li> </ul> </div> </div> <div id="disaster" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> <div style="float:left;"> <h2 style="font-weight:bold; font-size:20px; display:inline-block;">Suporte para Disaster Recovery</h2> <ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;"> <li>Suporte operacional no local</li> <li>Verificação visual de equipamentosa</li> <li>Substituição de componentes</li> <li>Exemplo de comandos segundo instruções específicas</li> <li>Monitorização de Sistemas 24/24h</li> </ul> </div> </div> </div> </div> </div> 

Answer 1

正如@CZorio所说，您需要查看媒体查询，并且您还可以阅读有关css单元的信息，有些单元比其他单元更有助于响应式布局： http ： //www.w3schools.com/cssref/css_units.asp