时间戳

首页 > 解决方案 > (HTML CSS) 代码示例 div 弄乱了我的页面

html - (HTML CSS) 代码示例 div 弄乱了我的页面

问题描述

我创建了一个 div 示例，它使用 /google/code-prettify 库，这是一个颜色库。它基本上是另一个带有文本区域的 div 内的 div。每当我尝试在下一行中添加新段落、标题或其他示例时，它都会弄乱页面。关于 prettyprint lang 类的一些事情使得无法添加更多信息。

你能看到我错过了什么吗？

HTML

 <div class="examplebox">
            <h3>Code Example:</h3>
            <div class="exampleinsidebox">

                <pre style="padding-left:20px;"  class="prettyprint lang-python" >
                  <!-- !!!!! Start of showing Code !!!!!-->
                   # I am a comment
                  print("Free code wiki")
                <!-- !!!!! End of showing Code !!!!!-->
                </pre>
                </div>
                </div>

            <button
              onclick="window.location.href = '/TryYourselfCodes/pythonguide4.html'; "
              style="left:30px;"
              class="buttontest"
            >
              Try yourself >>
            </button>

          </div>

CSS

.examplebox {
  background-color: #f3f4fa;
  border-style: unset;

  padding: 30px;
}
.examplebox h3 {
  padding-bottom: 10px;
}
.examplebox button {
  top: 20px;
}
.exampleinsidebox {
  background-color: black;
  border-style: unset;
}
.exampleinsidebox p {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: white;
}



pre.prettyprint {
  padding: unset;
  border:none;
}

/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint {
  background: #343434;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco,
    Consolas, monospace;
  border: 0 !important;

}

标签： htmlcss

解决方案

正如我所看到的，您在第二个结束 div 标记中关闭<div class="examplebox">了该div，并且在最后一个结束标记处</pre></div></div> 没有打开- 。也许这会导致问题。<div></div>

推荐阅读