文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS网格框是否展开以适应动态放置的内容？

问CSS网格框是否展开以适应动态放置的内容？
EN

Stack Overflow用户

提问于 2018-06-19 12:29:51

回答 1查看 91关注 0票数 0

我刚接触过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();


}

css-grid

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-19 13:56:19

您的父div正在崩溃，因为它的子程序是绝对定位的，因此在文档流之外。以下是来自https://developer.mozilla.org/en-US/docs/Web/CSS/position的

绝对元素将从常规文档流中删除，并且不会为页面布局中的元素创建任何空间。

根据在height中的半径和位置的常量值设置JavaScript属性和网格第1列的宽度，将导致父div展开。

请参见代码笔：https://codepen.io/anon/pen/BVJXrW

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50928495

复制

相似问题

问CSS网格框是否展开以适应动态放置的内容？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格框是否展开以适应动态放置的内容？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格框是否展开以适应动态放置的内容？
EN