2016-04-27 12 views
1

ブログの投稿用のレイアウトを作成しているので、すべてがインラインCSSでなければなりません。 問題は...応答する必要があります!インラインCSSで反応性レイアウトを作成するにはどうすればいいですか?

大きなecransでは、同じ幅の各行に2つのブロックが必要です。 小さなecransには、1つしかない必要があります。私は実際にIE8で動作しないので、ブートストラップを使用したくありません。そして、私はメディアクエリーがインラインで動作しない、または私はworngだと思いますか?私がいれば、彼らと一緒に仕事をする方法を私に説明することができますか?

お願いします。

PS:あなたはここで私の「サイト」を参照してくださいすることができます

\t body{ 
 
\t \t font-family:Arial, Helvetica, sans-serif; 
 
    margin:0; 
 
    padding:0; 
 
\t }
\t <div id="container" style="max-width:1164px; padding:0px 25px;"> 
 
    \t <div id="sections" style="background-color:#e7f0f3; width:100%;"> 
 
     \t <div id="house" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> 
 
     \t  \t <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;"> 
 
        \t <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> 
 
      \t </div> 
 
      </div> 
 
     \t <div id="disaster" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> 
 
     \t  \t <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> 
 
      \t <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> 
 
      \t </div> 
 
      </div> 
 
     \t <div id="house" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> 
 
     \t  \t <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> 
 
       <div style="float:left;"> 
 
        \t <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> 
 
      \t </div> 
 
      </div> 
 
     \t <div id="disaster" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> 
 
     \t  \t <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> 
 
      \t <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> 
 
      \t </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div>

+0

好奇心ではなく、なぜか変わっています。 –

+0

"私はブログ記事のレイアウトを作成しているので、すべてがインラインCSSでなければなりません"。なぜインラインでなければならないのですか? – CZorio

+0

誰かが作成したウェブページがそのように機能するためです。私は本当に正常にコーディングしたいと思いますが、それは不可能です。 –

答えて

0

@CZorioあなたはメディアクエリを見て取得する必要があり、あなたはまた、CSS単位について読むことができます言うようにいくつかのユニットは他のものよりも応答性の高いレイアウトに役立ちます:http://www.w3schools.com/cssref/css_units.asp

関連する問題