Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
HTML
<div class="container">
<div class="card">
<h3>Title - Card 1</h3>
<p contenteditable>Medium length description with a few more words here.</p>
<div class="visual"></div>
</div>
<div class="card">
<h3>Title - Card 2</h3>
<p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<div class="visual"></div>
</div>
<div class="card">
<h3>Title - Card 3</h3>
<p contenteditable>Short Description.</p>
<div class="visual"></div>
</div>
</div>
CSS
.container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.visual {
height: 100px;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
padding: 1rem;
justify-content: space-between;
}
h3 {
margin: 0
}
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2023-10-25 (UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Falta la información que necesito"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muy complicado o demasiados pasos"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desactualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema de traducción"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema con las muestras o los códigos"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Otro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de comprender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Resolvió mi problema"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Otro"
}]