时间戳

首页 > 解决方案 > 在 td 标签中使用 `display:block` 从顶部开始文本？我需要将文本移到底部

html - 在 td 标签中使用 `display:block` 从顶部开始文本？我需要将文本移到底部

问题描述

我试图让文本看起来像一个传统的控制台日志，从底部出现并向上移动。如果我display: block从td.css 中的标签中删除它，它会像我想要的那样从底部向上移动，但是<td>顶部的表格会扩展超过其定义的高度？如果我保留display: block，它不会扩展到表格之外，但文本来自自上而下。帮助将不胜感激。

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="app.css">
</head>
<body>
  <div class="disable-highlight">
    <h1>DNPS</h1>
    <input id="btn" name="button" type="button" value="Start Server"/>
  </div>
  <table>
      <td id="consoleLog">
  </table>
  <script>require('./server.js')</script>
</body>
</html>

应用程序.css：

.disable-highlight{
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

body {
  font-family: "Courier New", Courier, monospace;
  font-weight:300;
    line-height: 1.75em;
    font-size: 16px;
  text-align: center;
    background-color: #222;
    color: #aaa;
  /*-webkit-app-region: drag;*/
}

h1 {
  font-family: "Courier New", Courier, monospace;
  font-weight:300;
    line-height: 1.75em;
    font-size: 16px;
  text-align: center;
    background-color: #222;
    color: #aaa;
  -webkit-app-region: drag;
}

table {
  width: 95%;
  height: 200px;
  color: #aaa;
  border-color: #aaa;
  background-color: #292929;
  border: solid 1px;
  border-radius: 7px;
  position: absolute;
  table-layout: fixed;
  bottom: 5%;
  margin-left: 1.25%;
}

td {
  border-color: orange;
  border-style: dashed;
  height: 100%;
  text-align: left;
  overflow-y: scroll;
  display:block;
}

标签： htmlcss

解决方案

那是因为你有height: 100%ontd并且它将占据整个父级并且文本只会在顶部..

<span></span>您可以通过放入它td然后将其放置在您想要的位置来避免这种情况flex或position: absolute

希望它有所帮助:)

推荐阅读