html - 在所有浏览器中使用 column-count 时避免 paragraf 被破坏-6ren

html - 在所有浏览器中使用 column-count 时避免 paragraf 被破坏

转载作者：行者123 更新时间：2023-11-28 06:19:24

我正在使用 HTML5 对列进行一些响应式设计。我一直在尝试为宽度 <800 像素制作一列，为宽度 > = 800 像素制作 3 列。我已经用 firefox 完成了，但不能用 chrome 和 I.E.我的代码:

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