Javascript随机报价-可以，但是为什么此按钮不会出现在THIS Div中? [英] Javascript Random Quote - Works, but why won't the button show up in THIS Div?

问题描述

我终于得到了随机报价"具有功能正常的javascript/按钮的容器.

当前，它可以在我的主要中央区域(oneSUB)中工作，但不能在其他div中工作.我希望能够将其移动到不同的网格空间，例如四个"网格.在我的代码中.四个"是"oneSUB"

下面右下方的小方框

问题是按钮(btnQUOTE)没有显示在四个"正如我看到的，在先前尝试制作随机报价按钮的过程中，它可能就在屏幕上……但是东西有所不同.为什么/为什么四个"中缺少按钮?

四个"包含和拉伸诸如段落之类的内容，即使在其下方展开时，该按钮也不会漂浮在其他地方，因此我认为它不在div之外，但是该按钮在此似乎表现出不同的行为.>

HTML:

 < div class ="container-QUOTE">< div class ="quote-text">< h1 id ="quote">我可以吃一匹马.< p id =作者">-谁说</p></div>< button id ="btnQUOTE">单击此处</button></div> 

CSS:

  .oneSUB {背景颜色:rgba(255，255，255，.7);字体家族:"Roboto"，无衬线；网格区域:一个；自动换行:断词；padding-left:0px;padding-top:0像素；高度:100％;边距:0px;最大宽度:100％；}.four {背景颜色:rgba(255，255，255，.7);网格区域:四个；padding-left:0px;padding-top:0像素；高度:100％;最大宽度:100％；最大高度:100％；溢出:隐藏；自动换行:断词；}#btnQUOTE {边距顶部:30像素;font-size:25px;填充:10px 20px;背景颜色:#191716;颜色:#F15025;文本转换:大写；}.container-QUOTE {背景颜色:#fff;宽度:180vw;最大宽度:100％；最大高度:100％；内边距:40px;高度:55vh；左边框:3像素实线#f15025;} 

非常感谢！让我知道我是否还能提供其他任何服务主要基于本教程的代码: https://www.youtube.com/watch?v=0poDnc5X7Zk&

JS Fiddle: https://jsfiddle.net/o2t1qya5/1/

解决方案

好吧，看起来像是CSS问题，这是令人讨厌的样式声明

  .wrapper文章div {/*高度:100％；<-删除了此*/border-radius:12px;} 

这似乎已经解决了.

I've finally got a "Random Quote" container with a functioning javascript/button.

Currently, it works in my main center section (oneSUB) but not in a different div. I'd like to be able to move this to a different grid space like "four" in my code. "four" is the bottom right smaller box below "oneSUB"

The problem is the button (btnQUOTE) doesn't show up in "four" It's possible it's just off the screen as I saw that in previous attempts at making a random quote button...but stuff was different. How/Why is the button missing in "four"?

"four" contains and stretches for contents like paragraphs and even when below it is expanded, the button never shows up floating elsewhere, so I wouldn't think it's outside the div, but the button has seemed to behave differently there....

HTML:

      <div class="container-QUOTE">
        <div class="quote-text">
          <h1 id="quote"> I could eat a horse.</h1>
          <p id="author"> - whoever said</p>
        </div>
        <button id="btnQUOTE">Click Here</button>
      </div>

CSS:

.oneSUB {
  background-color: rgba(255, 255, 255, .7);
  font-family: 'Roboto', sans-serif;
  grid-area: one;
  word-wrap: break-word;
  padding-left: 0px;
  padding-top: 0px;
  height: 100%;
  margin: 0px;
  max-width: 100%;
}


.four {
  background-color: rgba(255, 255, 255, .7);
  grid-area: four;
  padding-left: 0px;
  padding-top: 0px;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

#btnQUOTE {
  margin-top: 30px;
  font-size: 25px;
  padding: 10px 20px;
  background-color: #191716;
  color: #F15025;
  text-transform: uppercase;
}


.container-QUOTE {
  background-color: #fff;
  width: 180vw;
  max-width: 100%;
  max-height: 100%;
  padding: 40px;
  height: 55vh;
  border-left: 3px solid #f15025;
}

Thank you so much! Let me know if I can provide anything else largely basing code off this tutorial: https://www.youtube.com/watch?v=0poDnc5X7Zk&

JS Fiddle: https://jsfiddle.net/o2t1qya5/1/

解决方案

Ok, looks like its a CSS issue, here is the offending style declaration

.wrapper article div {
  /* height: 100%; <-- Removed this */ 
  border-radius: 12px;
}

That seems to have handled it.

这篇关于Javascript随机报价-可以，但是为什么此按钮不会出现在THIS Div中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！