Question

我正在使用HTML5的列进行一些响应式设计。我试图为宽度＆lt; 800px制作单列，为宽度＆gt; = 800px制作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;         
    }
}

对于FIREFOX（v44.02），这是完美的，但不能用chrome或I.E. 我已经尝试过很多css3，但没有运气。任何人都知道一种工作方法，至少可以使用Firefox Chrome和Opera吗？

谢谢！

Answer 1

查看您的媒体查询。您定义了(min-width: 1000px)而不是您为800px宽度编写的内容。对我而言，它在Chrome中看起来很不错。

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

Answer 2

将display: inline-block添加到您希望显示为单个内容单元的段落中。

以下是基于Steffen的更新jsfiddle： https://jsfiddle.net/gkazwkfa/

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

2 个答案: