list - 在 3 列中列出文本
问题描述
我被困了 3 个小时,没有在网上找到任何东西。
这就是我想要实现的目标:https ://gyazo.com/281aa4fd3ddc3824063899da5f121d72
这就是我得到的: https ://gyazo.com/d50617fa8a6ff38d36b9b0c795328b89
不能让第一个列表无法侵入第 2 列,这是我的问题。
我尝试使用 div、表格、某些列属性,但似乎无法使其工作。
就这么简单……我需要 3 列,1 列用于列表,仅此而已。
#fondo{
align-content: center;
width: 960px;
}
#cabecera{
background-color: grey;
}
#cabecera H1{
align-content: center;
margin-left: 200px;
margin-right: 200px;
}
#datos {
width: 260px;
float: left;
}
#contenido {
width: 700px;
float: right;
}
#columnas{
width: 700px;
column-count: 3;
/*-webkit-column-break-break-inside: avoid;
-webkit-column-break-break-after: always;*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML & CSS: Curso práctico avanzado</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="fondo">
<div id="cabecera">
<h1>HTML & CSS: Curso práctico avanzado</h1>
</div>
<div>
<div id="datos">
<h2>Datos del libro</h2>
<ul>
<li>Título: HTML & CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
</div>
<div id="contenido">
<div>
<h2>Descripción del libro</h2>
<p>
Aunque los inicios de Internet se remontan a los años sesenta,
no ha sido hasta los años noventa cuando, gracias a la Web, se ha
extendido su uso por todo el mundo. En pocos años, la Web ha
evolucionado enormemente: se ha pasado de páginas sencillas, con
pocas imágenes y contenidos estáticos que eran visitadas por unos
pocos usuarios a páginas complejas, con contenidos dinámicos que
provienen de bases de datos y que son visitadas por miles de
usuarios al mismo tiempo.
</p>
<p>
Todas las páginas están internamente construidas con la misma
tecnología, con el Lenguaje de marcas de hipertexto (Hypertext
Markup Language, HTML) y con las Hojas de estilo en cascada
(Cascading Style Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en
aprender a desarrollar sus propias páginas web. No son necesarios
conocimientos previos para aprender con este libro, lo único que
es necesario es saber utilizar un ordenador y saber navegar por la
Web.
</p>
<h2>Contenido del libro</h2>
<p>
El contenido de este libro se estructura en tres apartados bien
diferenciados:
</p>
</div>
<div id="columnas">
<div style="width: 233px">
<ul>
<li>En la primera parte del libro se trabajan conceptos generales
que son necesarios para poder desarrollar páginas web; se explican
conceptos de estructura física y estructura lógica (o estructura
de navegación) de un sitio web. Se detalla cómo influye la
estructura física en las URL o direcciones que se emplean a la
hora de crear los enlaces de un sitio web. Pasando por el concepto
de "estándar web", un término general que se emplea para
refererirse a los estándares que define su funcionamiento como
HTML y CSS, empleados para el desarrollo de las páginas web en el
lado del cliente.</li>
</ul>
</div>
<div style="width: 233px">
<ul>
<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican las etiquetas de
HTML que se utilizan para definir el texto, los enlaces, las
listas, las tablas, los formularios y los elementos
multimedia.</li>
</ul>
</div>
<div style="width: 233px">
<ul>
<li>En la tercera y última parte se explica CSS, el lenguaje que
se emplea para definir el formato y la presentación de una página
web. Se explica cómo utilizar el color, cómo definir la
presentación del texto, de las tablas y de los formularios; cómo
realizar transformaciones y transiciones con el fin de diseñar una
página web.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- r - 如何在 R 数据框中用 NA 替换空字符串?
- javascript - 使用 NFC 阅读器时超越“Touch to Beam” - Ionic
- java - 如何拆分多行并将它们添加到arraylist
- openstack - 如何将浮动 IP 与 Heat 关联到特定接口
- python - 如何在 Selenium 中获得“nth-of-type”
- node.js - npm坏了:找不到模块'proto-list'
- javascript - 为什么 document.getElementsByClassName 在我的情况下不起作用
- python - Python - SQLAlchemy:group_by() 多列,带有 sum()
- python - 熊猫迭代更新列值
- python - 使用 selenium 和 python 通过 CssSelector 的“开始于”方法定位元素