时间戳

首页 > 解决方案 > 插入为行时的可变长度项（符合表格布局）

html - 插入为行时的可变长度项（符合表格布局）

问题描述

这是一个建议问题。我创建了一个可滚动的 div，它看起来像这样：

在此处输入图像描述

我将在此处插入<p></p>s 来代替<p>sadsa</p>其中包含四个项目：categorization, y_i, RC(F_i), RC(tilde(F)_j)。我们的想法是让它们在这个 div 中很好地对齐。我以前没有遇到过类似的问题。最后三个（y_i, RC(F_i), RC(tilde(F)_j）不是问题，因为它们是数字并且将具有固定宽度（因此甚至可以使用诸如边距之类的东西来正确放置它们。但是分类字符串可以是任意长度。一种解决方案是使其固定长度，然后为y_i使用边距等。但是，这不起作用，因为如果用户展开窗口，包含的 div 会变大，但用于分类的字段将是固定宽度的。有没有人遇到过这样的问题？

我将不胜感激任何建议。也许我可以为此使用一张桌子？

这是您的可滚动 div 的代码（这不完全是我所拥有的，但它将作为此屏幕截图的粗略复制品）：

.descriptive-data {
    position:fixed;
    display: inline-block;
    width: 20%;
    height: 300px;
    margin-bottom: 5px;
    width: 44%;
    bottom: 20px;
    top:20px;
}

.table-header-div {
    position:relative;
    display: inline;
    width: 100%;
    text-align: right;
}

.margin-left-06em {
    margin-left: 0.6em;
}

.spans-wrapper {
    display: inline-block;
    position: relative;
    margin-right: 12px;
    float: right;
}

.table-header-hr {
    position: relative;
    margin-top: 0;
    top: 25px;
    border-top: 1px solid rgb(0, 0, 0);
}

.scrollable-details {
    position: relative;
    display: block;
    height: 200px;
    width: 400px;
    margin-top: 10px;
    overflow-y: scroll;
    padding: 10px;
    background: red;
}

// https://codepen.io/GhostRider/pen/GHaFw
.style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #F4F7F7;
}
<div class="descriptive-data">
 
      <div class="table-header-div">
          <span class="spans-wrapper">
              <span>y_i</span>
              <span class="margin-left-06em">f_i</span>
              <span class="margin-left-06em">tilde_f_j</span>
          </span>
      </div>
      <hr class="table-header-hr">
 

  <div class="scrollable-details style-2">
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
      <p>sadsa</p>
  </div>
</div>

标签： htmlcss

解决方案

建议您使用表。他们已经创建了 wot 的案例：

.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}
<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>

推荐阅读