在所有浏览器中使用列计数时都要避免使用paragraf

我正在做一些响应式设计，使用HTML5的列。我被Stucked试图制作宽度为<的单个列，宽度为800px，宽度为3列。我已经完成了与Firefox，但不能与铬和I.E.我的代码：在所有浏览器中使用列计数时都要避免使用paragraf

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Media Queries Example 1</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="css/default.css" media="screen"> 
     <link rel="stylesheet" href="css/print.css" media="print"> 
    </head> 
    <body>   
     <section> 
      <div class="columns"> 
       <p> 
        <span class="pTitle">HTML:</span><br> 
        HTML, sigla en inglés de HyperText Markup Language 
        (lenguaje de marcas de hipertexto), hace referencia al 
        lenguaje de marcado para la elaboración de páginas web. 
        Es un estándar que sirve de referencia del software que 
        conecta con la elaboración de páginas web en sus diferentes 
        versiones, define una estructura básica y un código 
        (denominado código HTML) para la definición de contenido de 
        una página web, como texto, imágenes, videos, juegos, entre otros. 
       </p> 

       <p> 
        <span class="pTitle">CSS:</span><br> 
        Hoja de estilo en cascada o CSS (siglas en inglés de cascading 
        style sheets) es un lenguaje usado para definir y crear la 
        presentación de un documento estructurado escrito en HTML o 
        XML2 (y por extensión en XHTML). El World Wide Web Consortium 
        (W3C) es el encargado de formular la especificación de las 
        hojas de estilo que servirán de estándar para los agentes de 
        usuario o navegadores. 
       </p> 

       <p> 
        <span class="pTitle">JAVASCRIPT:</span><br> 
        JavaScript (abreviado comúnmente JS) es un lenguaje de 
        programación interpretado, dialecto del estándar ECMAScript. 
        Se define como orientado a objetos,3 basado en prototipos, 
        imperativo, débilmente tipado y dinámico.<br> 
        Se utiliza principalmente en su forma del lado del cliente 
        (client-side), implementado como parte de un navegador web 
        permitiendo mejoras en la interfaz de usuario y páginas web 
        dinámicas4 aunque existe una forma de JavaScript del lado 
        del servidor (Server-side JavaScript o SSJS). 
        Su uso en aplicaciones externas a la web, por ejemplo en 
        documentos PDF, aplicaciones de escritorio (mayoritariamente 
        widgets) es también significativo. 
       </p> 
      </div> 
     </section> 
    </body> 
</html>

和CSS：

@media (min-width: 800px){ 
    body{ 
     background: #ccccff; 
    } 

    div.columns{ 
     -moz-column-count: 3; 
     -webkit-column-count: 3; 
     column-count: 3; 

     -moz-column-gap: 40px; 
     -webkit-column-gap: 40px; 
     column-gap: 40px; 

     -moz-column-rule: 5px solid black; 
     -webkit-column-rule: 5px solid black; 
     column-rule: 5px solid black; 
    } 

    div.columns p{ 
     page-break-inside:avoid;   
    } 
}

此作品完美的FIREFOX（v44.02），但无法与Chrome或I.E.做我已经尝试了很多css3 propierties，但没有运气。任何人都知道一个工作方法，至少，Firefox Chrome和Opera？

谢谢！

来源

2016-02-29 rul3s

看看你的媒体查询。你定义了(min-width: 1000px)，而不是像你为800px宽写的那样。对我来说，它在Chrome中看起来不错。

请参见：https://jsfiddle.net/o3gom4p2/

来源

2016-02-29 14:50:32

这是一个minnor错误，主要的问题不解决，我tryied在某些计算机相同，所以它无法在Chrome工作。 – rul3s

添加display: inline-block到要显示为内容的一个单元的段落。

下面是基于斯特芬的一个更新的jsfiddle： https://jsfiddle.net/gkazwkfa/

来源

2016-02-29 14:56:09

我添加了display：inline-block和chrome中的相同行为，仍然打破P. – rul3s

添加一个jsfiddle，我会看看...... :-) –

在所有浏览器中使用列计数时都要避免使用paragraf

回答

相关问题