我是CSS网格的新手，遇到了一些困难。我要在页面加载后动态地将divs附加到CSS网格框（div）中，但是网格框不会扩展以反映它们（特别是我将divs布置在一个圆圈）。附加的divs绝对相对于网格框放置。相反，它们似乎漂浮在其外部。我想做的事可能吗？如果是这样，我的方式有什么错误？
这是我编写的CodePen，它说明了我想做的事情，应该可以说明我遇到的问题：https://codepen.io/Cerulean3/pen/yEpOGN。在CodePen中，左侧的红色框应扩大，以便字母圈在其中。
这是HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pasapalabra</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<body>
<div id="bigGrid">
<div id="letter-display">
</div>
<div id="user-interaction">
<div id="user-output">user output</div>
<div id="user-input">user input</div>
</div>
<script src="js/main.js"></script>
</div>
</body>
</html>
和SCSS
body {
background: royalblue;
margin: 0;
height: 100%;
header {
grid-area: header;
background: #1ab048;
}
footer {
grid-area: footer;
background: #FCE1E5;
}
}
#bigGrid {
display: grid;
position: relative;
grid-template-columns: 400px 10px 1fr;
grid-template-areas: "letterDisplay . userInteraction" ;
}
#user-interaction {
background:#BC7A00;
display: subgrid;
grid-area:userInteraction;
grid-template-rows: 1fr 10px 1fr;
grid-template-columns: 1fr;
grid-template-areas: "userOutput . userInput ";
}
#user-output {
grid-area: userOutput;
background: grey;
border: solid black 1px;
}
#user-input {
grid-area: userInput;
}
#letter-display {
grid-area:letterDisplay;
position: relative;
background: #FF0000;
div {
height: 40px;
width: 40px;
border-radius: 50%;
font-family: 'Comfortaa', sans-serif;
background: lightblue;
border: blueviolet 1px;
position: absolute;
flex-direction: row;
display: flex;
justify-content: center;
align-items: center;
span {
display: inline-block;
}
}
}
和JavaScript
const log = console.log.bind(null);
function QuestionGenerator() {
this.data = [
{
letter: "a",
answer: "abducir",
status: 0,
question: [("CON LA A. Dicho de una supuesta criatura extraterrestre: Apoderarse de alguien"), ("CON LA A. 2 Dicho de una supuesta criatura extraterrestre: Apoderarse de alguien"), ("CON LA A. 3Dicho de una supuesta criatura extraterrestre: Apoderarse de alguien")]
},
{
letter: "b",
answer: "bingo",
status: 0,
question: [("CON LA B. Juego que ha sacado de quicio a todos los 'Skylabers' en las sesiones de precurso"), ("CON LA B. 2 Juego que ha sacado de quicio a todos los 'Skylabers' en las sesiones de precurso"), ("CON LA B. 3 Juego que ha sacado de quicio a todos los 'Skylabers' en las sesiones de precurso")]
},
{
letter: "c",
answer: "churumbel",
status: 0,
question: [("CON LA C. Niño, crío, bebé"), ("CON LA C. Niño, crío, bebé"), ("CON LA C. Niño, crío, bebé")]
},
{
letter: "d",
answer: "diarrea",
status: 0,
question: [("CON LA D. Anormalidad en la función del aparato digestivo caracterizada por frecuentes evacuaciones y su consistencia líquida"), ("CON LA D. Anormalidad en la función del aparato digestivo caracterizada por frecuentes evacuaciones y su consistencia líquida"), ("CON LA D. Anormalidad en la función del aparato digestivo caracterizada por frecuentes evacuaciones y su consistencia líquida")
]
},
{
letter: "e",
answer: "ectoplasma",
status: 0,
question: [("CON LA E. Gelatinoso y se encuentra debajo de la membrana plasmática. Los cazafantasmas medían su radiación"), ("CON LA E. Gelatinoso y se encuentra debajo de la membrana plasmática. Los cazafantasmas medían su radiación"), ("CON LA E. Gelatinoso y se encuentra debajo de la membrana plasmática. Los cazafantasmas medían su radiación")]
},
{
letter: "f",
answer: "facil",
status: 0,
question: [("CON LA F. Que no requiere gran esfuerzo, capacidad o dificultad"), ("CON LA F. Que no requiere gran esfuerzo, capacidad o dificultad"), ("CON LA F. Que no requiere gran esfuerzo, capacidad o dificultad")]
},
{
letter: "g",
answer: "galaxia",
status: 0,
question: [("CON LA G. Conjunto enorme de estrellas, polvo interestelar, gases y partículas"), ("CON LA G. Conjunto enorme de estrellas, polvo interestelar, gases y partículas"), ("CON LA G. Conjunto enorme de estrellas, polvo interestelar, gases y partículas")]
},
{
letter: "h",
answer: "harakiri",
status: 0,
question: [("CON LA H. Suicidio ritual japonés por desentrañamiento"), ("CON LA H. Suicidio ritual japonés por desentrañamiento"), ("CON LA H. Suicidio ritual japonés por desentrañamiento")]
},
{
letter: "i",
answer: "iglesia",
status: 0,
question: [("CON LA I. Templo cristiano"), ("CON LA I. Templo cristiano"), ("CON LA I. Templo cristiano")]
},
{
letter: "j",
answer: "jabali",
status: 0,
question: [("CON LA J. Variedad salvaje del cerdo que sale en la película 'El Rey León', de nombre Pumba"), ("CON LA J. Variedad salvaje del cerdo que sale en la película 'El Rey León', de nombre Pumba"), ("CON LA J. Variedad salvaje del cerdo que sale en la película 'El Rey León', de nombre Pumba")]
},
{
letter: "k",
answer: "kamikaze",
status: 0,
question: [("CON LA K. Persona que se juega la vida realizando una acción temeraria"), ("CON LA K. Persona que se juega la vida realizando una acción temeraria"), ("CON LA K. Persona que se juega la vida realizando una acción temeraria")]
},
{
letter: "l",
answer: "licantropo",
status: 0,
question: [("CON LA L. Hombre lobo"), ("CON LA L. Hombre lobo"), ("CON LA L. Hombre lobo")]
},
{
letter: "m",
answer: "misantropo",
status: 0,
question: [("CON LA M. Persona que huye del trato con otras personas o siente gran aversión hacia ellas"), ("CON LA M. Persona que huye del trato con otras personas o siente gran aversión hacia ellas"), ("CON LA M. Persona que huye del trato con otras personas o siente gran aversión hacia ellas")]
},
{
letter: "n",
answer: "necedad",
status: 0,
question: [("CON LA N. Demostración de poca inteligencia"), ("CON LA N. Demostración de poca inteligencia"), ("CON LA N. Demostración de poca inteligencia")]
},
{
letter: "ñ",
answer: "señal",
status: 0,
question: [("CONTIENE LA Ñ. Indicio que permite deducir algo de lo que no se tiene un conocimiento directo."), ("CONTIENE LA Ñ. Indicio que permite deducir algo de lo que no se tiene un conocimiento directo."), ("CONTIENE LA Ñ. Indicio que permite deducir algo de lo que no se tiene un conocimiento directo.")]
},
{
letter: "o",
answer: "orco",
status: 0,
question: [("CON LA O. Humanoide fantástico de apariencia terrible y bestial, piel de color verde creada por el escritor Tolkien"), ("CON LA O. Humanoide fantástico de apariencia terrible y bestial, piel de color verde creada por el escritor Tolkien"), ("CON LA O. Humanoide fantástico de apariencia terrible y bestial, piel de color verde creada por el escritor Tolkien")]
},
{
letter: "p",
answer: "protoss",
status: 0,
question: [("CON LA P. Raza ancestral tecnológicamente avanzada que se caracteriza por sus grandes poderes psíonicos del videojuego StarCraft"), ("CON LA P. Raza ancestral tecnológicamente avanzada que se caracteriza por sus grandes poderes psíonicos del videojuego StarCraft")]
},
{
letter: "q",
answer: "queso",
status: 0,
question: [("CON LA Q. Producto obtenido por la maduración de la cuajada de la leche"), ("CON LA Q. Producto obtenido por la maduración de la cuajada de la leche"), ("CON LA Q. Producto obtenido por la maduración de la cuajada de la leche")]
},
{
letter: "r",
answer: "raton",
status: 0,
question: [("CON LA R. Roedor"), ("CON LA R. Roedor"), ("CON LA R. Roedor")]
},
{
letter: "s",
answer: "stackoverflow",
status: 0,
question: [("CON LA S. Comunidad salvadora de todo desarrollador informático"), ("CON LA S. Comunidad salvadora de todo desarrollador informático"), ("CON LA S. Comunidad salvadora de todo desarrollador informático")]
},
{
letter: "t",
answer: "terminator",
status: 0,
question: [("CON LA T. Película del director James Cameron que consolidó a Arnold Schwarzenegger como actor en 1984"), ("CON LA T. Película del director James Cameron que consolidó a Arnold Schwarzenegger como actor en 1984"), ("CON LA T. Película del director James Cameron que consolidó a Arnold Schwarzenegger como actor en 1984")]
},
{
letter: "u",
answer: "unamuno",
status: 0,
question: [("CON LA U. Escritor y filósofo español de la generación del 98 autor del libro 'Niebla' en 1914"), ("CON LA U. Escritor y filósofo español de la generación del 98 autor del libro 'Niebla' en 1914"), ("CON LA U. Escritor y filósofo español de la generación del 98 autor del libro 'Niebla' en 1914")]
},
{
letter: "v",
answer: "vikingos",
status: 0,
question: [("CON LA V. Nombre dado a los miembros de los pueblos nórdicos originarios de Escandinavia, famosos por sus incursiones y pillajes en Europa"), ("CON LA V. Nombre dado a los miembros de los pueblos nórdicos originarios de Escandinavia, famosos por sus incursiones y pillajes en Europa"), ("CON LA V. Nombre dado a los miembros de los pueblos nórdicos originarios de Escandinavia, famosos por sus incursiones y pillajes en Europa")]
},
{
letter: "w",
answer: "sandwich",
status: 0,
question: [("CONTIENE LA W. Emparedado hecho con dos rebanadas de pan entre las cuales se coloca jamón y queso"), ("CONTIENE LA W. Emparedado hecho con dos rebanadas de pan entre las cuales se coloca jamón y queso"), ("CONTIENE LA W. Emparedado hecho con dos rebanadas de pan entre las cuales se coloca jamón y queso")]
},
{
letter: "x",
answer: "botox",
status: 0,
question: [("CONTIENE LA X. Toxina bacteriana utilizada en cirujía estética"), ("CONTIENE LA X. Toxina bacteriana utilizada en cirujía estética"), ("CONTIENE LA X. Toxina bacteriana utilizada en cirujía estética")]
},
{
letter: "y",
answer: "peyote",
status: 0,
question: [("CONTIENE LA Y. Pequeño cáctus conocido por sus alcaloides psicoactivos utilizado de forma ritual y medicinal por indígenas americanos"), ("CONTIENE LA Y. Pequeño cáctus conocido por sus alcaloides psicoactivos utilizado de forma ritual y medicinal por indígenas americanos"), ("CONTIENE LA Y. Pequeño cáctus conocido por sus alcaloides psicoactivos utilizado de forma ritual y medicinal por indígenas americanos")]
},
{
letter: "z",
answer: "zen",
status: 0,
question: [("CON LA Z. Escuela de budismo que busca la experiencia de la sabiduría más allá del discurso racional"), ("CON LA Z. Escuela de budismo que busca la experiencia de la sabiduría más allá del discurso racional"), ("CON LA Z. Escuela de budismo que busca la experiencia de la sabiduría más allá del discurso racional")]
}];
this.Q_UNANSWERED = 0;
this.Q_CORRECT = 1;
this.Q_INCORRECT = 2;
this.Q_PASAPALABRA = 3;
this.NO_QUESTIONS = -1;
this.getCountByQuestionType = function (scoreTypeWanted) {
return this.data.filter(elem => elem.status === scoreTypeWanted).length;
};
this.getNextQuestion = function (questionTypeWanted) {
const unansweredQuestions = this.data.filter(elem => elem.status === questionTypeWanted);
if (unansweredQuestions.length == 0) {
return this.NO_QUESTIONS;
}
const nextQuestionData = unansweredQuestions.shift();
const nextQuestionArray = nextQuestionData.question;
if (!Array.isArray(nextQuestionArray)) {
logBad("Error: question data is malformed");
return null;
}
nextQuestionArray.push(nextQuestionArray.shift()); // otra pregunta la próxima vez
return nextQuestionData;
};
this.markQuestion = function (letter, code) {
const matchingQuestion = this.data.find(elem => elem.letter === letter);
if (matchingQuestion === undefined) {
logBad(`markQuestion: Error, matching question not found for letter ${error(letter)}`);
throw(new Error("Question data is malformed"));
return;
}
matchingQuestion.status = code;
};
this.checkAnswer = function (answer, letter) {
const matchingQuestion = this.data.find(elem => elem.letter === letter);
if (matchingQuestion === undefined) {
logBad(`checkAnswer: Error, matching question not found for letter ${error(letter)}`);
return;
}
return answer === matchingQuestion.answer;
};
this.reInit = function () {
this.data.forEach(elem => elem.status = this.Q_UNANSWERED);
};
this.getLetters = function () {
return this.data.map(element => element.letter);
}
}
const questionGenerator = new QuestionGenerator();
const tablero = {
letras: questionGenerator.getLetters(),
layout() {
const radius = 225;
const origin = {x: 325, y: 325};
master = document.getElementById('letter-display');
const count = this.letras.length;
for (let i = 0; i < count; i++) {
const diva = document.createElement('div');
const letter = diva.id = this.letras[i];
master.appendChild(diva);
diva.innerHTML = "<span>" + letter + "</span>";
let {x, y} = this.returnCoords(origin.x,origin.y, this.degreesToRad((360 / count) * i), radius);
let width = window.getComputedStyle(diva).getPropertyValue('width');
let height = window.getComputedStyle(diva).getPropertyValue('height');
diva.style.left = x - Number.parseFloat(width) + "px";
diva.style.top = y - Number.parseFloat(height) + "px";
log(diva.style.left,diva.style.top);
}
},
degreesToRad(degrees) {
return degrees * (Math.PI / 180);
},
radToDegrees(rad) {
return radians * (180 / Math.PI);
},
returnCoords(originX = 0, originY = 0, radians, radius) {
let x = originX + (Math.cos(radians) * radius);
let y = originY + (Math.sin(radians) * radius);
return ({x, y});
},
init() {
this.layout();
},
};
window.addEventListener('load', init);
let master;
function init() {
tablero.init();
}
答案 0 :(得分：2)
您的父div正在崩溃，因为它的子绝对定位，因此不在文档流之外。以下来自https://developer.mozilla.org/en-US/docs/Web/CSS/position
绝对
该元素已从常规文档流中删除，并且未创建任何空间 页面布局中的元素。
根据JavaScript中半径和位置的常量值设置height属性和网格第1列的宽度会导致父div扩展。