避免在所有浏览器中使用column-count时出现破坏
避免在所有浏览器中使用column-count时出现破坏
提问于 2016-02-29 20:34:55
我正在用HTML5做一些响应式的列设计。我在尝试为width<800px创建一列，为width>=800px创建3列时遇到了麻烦。我已经用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>和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;
}
}这在火狐(v44.02)上工作得很好，但是不能用chrome或者也就是说，我已经尝试了很多css3的特性，但都没有成功。有谁知道至少在Firefox Chrome和Opera上做这件事的工作方法？
谢谢!
回答 2
Stack Overflow用户
发布于 2016-02-29 22:50:32
看看你的媒体查询。你定义了(min-width: 1000px)，而不是像你写的800px宽度那样。对我来说，它在Chrome上看起来不错。
Stack Overflow用户
发布于 2016-02-29 22:56:09
将display: inline-block添加到要显示为单个内容单元的段落中。
这是一个基于Steffen的更新的jsfiddle：https://jsfiddle.net/gkazwkfa/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35699719
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号