前端之家

  1. 首页
  2. 问答

父母与子女的关系不起作用

• 问答

我不太确定该如何表达我的问题，因此请原谅我。我的计划是创建由字母“ 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;
}

结果

父母与子女的关系不起作用

任何帮助将不胜感激！！！

chifengbin 回答：父母与子女的关系不起作用

.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

,

假设您能够修改HTML，最简单的解决方法是将.world-box <div>移到{{1 }} .box：

<div>
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;
}

,

我实际上会创建一个函数，该函数会将所需的任何内容放入某种包装中，如下所示：

/* js/external.js */
//<![CDATA[
var doc,bod,M,I,S,Q,special,unspecial,shuffle,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,'>');
}
shuffle = function(array){
  var a = array.slice(),l = a.length;
  a.sort(function(b,c){
    return 0.5 - Math.random();
  });
  return a;
}
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,a = shuffle(textArray),l = a.length;
  var v = interval || 1500;
  rb.setText(a[0]);
  r = setInterval(function(){
    i++;
    if(i === l){
      if(noLoop){
        clearInterval(r); r = undefined;
        return;
      }
      else{
        a = shuffle(a); i = 0;
      }
    }
    rb.setText(a[i]);
  },v);
}
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'),'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'),'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>

只是一个想法。

csshtmljavascript
本文链接：https://www.f2er.com/3162782.html

大家都在问