父子关系不起作用

问题描述 投票：0回答：3

我不确定如何表达我的问题，请原谅我。我的计划是创建由字母“ Hello World”组成的巨型图像。我想将这些单词嵌套在大盒子里，后来决定让每个单词都放在一个小盒子里。在图片中，我创建了一个小盒子（尺寸尚未永久设置，我只是在测试）。但是，当我创建第二个小盒子时，它飞出了大盒子。在我的index.html文件中，第二个小盒子的<div>嵌套在大盒子div内。

这里是代码：

INDEX.HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>

    <div class = "box">

      <div class = "hello-box"></div>

        <div class = "h-left"></div>

        <div class = "h-mid"></div>

        <div class = "h-right"></div>

      </div>

      <div class = "world-box">

      </div>

    </div>

  </body>
</html>

STYLE.CSS


body {
  background-color: skyblue;
}

.box {
  position: relative;
  margin: auto;
  margin-top: 15%;
  display: block;
  border: 3px solid black;
  width: 800px;
  height: 500px;
}

.hello-box {
  position: relative;
  margin: auto;
  margin-top: 125px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.world-box {
  position: relative;
  margin: auto;
  margin-top: 125px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

结果

enter image description here

任何帮助将不胜感激！！

javascript html css
3个回答
3
投票

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>

    <div class="flex-container">
      <div>H</div>
      <div>E</div>
      <div>L</div>
      <div>L</div>
      <div>O</div>
      <div>W</div>
      <div>O</div>
      <div>R</div>
      <div>L</div>
      <div>D</div>
      <div>!</div>
    </div>
  </body>
</html>

使用flexbox

1
投票

假设您能够修改HTML，最简单的解决方法是将.world-box <div>移至.box <div>的[[inside]：

body { background-color: skyblue; } .box { position: relative; margin: auto; margin-top: 15%; display: block; border: 3px solid black; width: 800px; height: 500px; } .hello-box { position: relative; margin: auto; margin-top: 125px; width: 100px; height: 100px; border: 1px solid black; } .world-box { position: relative; margin: auto; margin-top: 125px; width: 100px; height: 100px; border: 1px solid black; }
<body>
  <div class="box">
    <div class="hello-box"></div>
    <div class="h-left"></div>
    <div class="h-mid"></div>
    <div class="h-right"></div>
    <div class="world-box"></div>
  </div>
</body>
1
投票
我实际上创建了一个函数，该函数会将您想要的任何内容放入某种包装中，如下所示：

/* js/external.js */ //<![CDATA[ var doc, bod, M, I, S, Q, special, unspecial, ReaderBoard, autoBoard, randBoard; // for use on other loads addEventListener('load', function(){ doc = document; bod = doc.body; M = function(tag){ return doc.createElement(tag); } I = function(id){ return doc.getElementById(id); } S = function(selector, within){ var w = within || doc; return w.querySelector(selector); } Q = function(selector, within){ var w = within || doc; return w.querySelectorAll(selector); } special = function(str){ return str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); } unspecial = function(str){ return str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>'); } ReaderBoard = function(outputElement){ this.output; var t = this; this.setOutput = function(element){ this.output = element; return this; } this.setOutput(outputElement); this.setText = function(text){ this.output.innerHTML = ''; for(var i=0,a=text.split(''),s,d,l=a.length; i<l; i++){ d = M('div'); s = a[i]; if(s === ' ')d.className = 'space'; d.innerHTML = special(s); this.output.appendChild(d); } return this; } } autoBoard = function(outputElement, textArray, interval, noLoop){ var rb = new ReaderBoard(outputElement), i = 0, r, l = textArray.length; var v = interval || 1500; rb.setText(textArray[0]); r = setInterval(function(){ i++; if(i === l){ if(noLoop){ clearInterval(r); r = undefined; return; } else{ i = 0; } } rb.setText(textArray[i]); }, v); } randBoard = function(outputElement, textArray, interval, noLoop){ var rb = new ReaderBoard(outputElement), m, a = [], r, l = textArray.length, n; var v = interval || 1500; function rand(){ m = Math.floor(Math.random()*l); if(a.length === l){ if(noLoop){ clearInterval(r); r = undefined; return false; } else{ a.splice(0); } } if(a.indexOf(m) === -1){ a.push(m); return m; } else{ return rand(); } } rb.setText(textArray[rand()]); r = setInterval(function(){ n = rand(); if(n !== false)rb.setText(textArray[n]); }, v); return this; } var rb = new ReaderBoard(I('readerboard')); rb.setText('Hello World!'); autoBoard(I('autoboard'), ['Check this out!', "It's a reader board.", 'This one runs in order.', 'Are you not amazed?']); autoBoard(I('noloop_autoboard'), ['Check this out!', "It's a reader board.", 'This one runs in order.', 'Are you not amazed?'], 2000, true); randBoard(I('randboard'), ['This is Awesome!', "Isn't totally random.", 'Create Something Cool', 'Success!', 'Nice']); randBoard(I('noloop_randboard'), ['This is Awesome!', "Isn't totally random.", 'Create Something Cool', 'Success!', 'Nice'], 3500, true); }); //]]>
/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
.flex_text{
  display:flex;
}
.flex_text>div{
  flex:1; background:#fff; font:bold 30px Arial, Helvetica, sans-serif; text-align:center; margin:3px;
}
.flex_text>.space{
  background:#ccc; margin:0;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div class='flex_text' id='readerboard'></div>
  <hr />
  <div class='flex_text' id='autoboard'></div>
  <hr />
  <div class='flex_text' id='noloop_autoboard'></div>
  <hr />
  <div class='flex_text' id='randboard'></div>
  <hr />
  <div class='flex_text' id='noloop_randboard'></div>
</body>
</html>
只是一个想法。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.