Html 在所有浏览器中使用列计数时，避免paragraf被破坏_Html_Css_Responsive Design_Multiple Columns_Break

Html 在所有浏览器中使用列计数时，避免paragraf被破坏

html css responsive-design

Html 在所有浏览器中使用列计数时，避免paragraf被破坏,html,css,responsive-design,multiple-columns,break,Html,Css,Responsive Design,Multiple Columns,Break,我正在用HTML5做一些反应灵敏的专栏设计。我在尝试制作一个宽度为800px的单列时遇到了麻烦。我已经用firefox完成了，但不能用chrome和我的代码： <!DOCTYPE html> <html> <head> <title>Media Queries Example 1</title> <meta charset="UTF-8"> <meta nam

我正在用HTML5做一些反应灵敏的专栏设计。我在尝试制作一个宽度为800px的单列时遇到了麻烦。我已经用firefox完成了，但不能用chrome和我的代码：

<!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>

这非常适用于FIREFOX（v44.02），但不能用于chrome或IE。我试过很多css3的甜点，但是运气不好。有人知道一种工作方法，至少是Firefox Chrome和Opera

谢谢

查看您的媒体查询。您定义了

（最小宽度：1000px）

，并且不像您为800px宽度编写的那样。对我来说，它在铬上看起来不错

请参见：

将

display:inline block

添加到要作为单个内容单元显示的段落中

以下是基于Steffen的更新JSFIDLE：

我已经添加了display:inline块和chrome中的相同行为，仍然是break p。添加一个jsfiddle，我会看看…：-）这是一个很小的错误，主要的问题还没有解决，我试过用一些电脑，所以它在Chrome上不起作用。

@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;         
    }
}