Question

我遇到的情况是某些数据显示在不同的列中。此列表包含2个部分。

列表头
列出正文

正文部分将有一个max-height。当有更多内容可以容纳这个高度时，滚动条将自动应用。

现在问题是当应用滚动条时，头部和身体部分内容的对齐会干扰并且看起来很奇怪。

是否有任何可能的解决方案以css，JavaScript，jQuery或任何其他方式解决此问题，即在应用滚动条时内容应自动在头部和身体部分对齐？

* {box-sizing: border-box;}
.listing {
  border: solid #000;
  border-width: 1px 1px 0;
  margin-bottom: 20px;
}
.row {
  overflow: hidden;
}
.col-1,
.col-2 {
  border-bottom: 1px solid #000;
  float: left;
  width: 20%;
}

.col-2 {
  width: 40%;
}

.col-1 + .col-1,
.col-1 + .col-2,
.col-2 + .col-2,
.col-2 + .col-1 {
  border-left: 1px solid #000;
}

.listing-body {
  height: 95px;
  overflow: auto;
}

<h2>Listing with correct alignment</h2>
<div class="listing">
  <div class="listing-header row">
    <div class="col-1">Heading 1</div>
    <div class="col-1">Heading 2</div>
    <div class="col-2">Heading 3</div>
    <div class="col-1">Heading 4</div>
  </div>
  <div class="listing-body">
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
  </div>
</div>
<h2>Listing with Incorrect alignment</h2>
<div class="listing">
  <div class="listing-header row">
    <div class="col-1">Heading 1</div>
    <div class="col-1">Heading 2</div>
    <div class="col-2">Heading 3</div>
    <div class="col-1">Heading 4</div>
  </div>
  <div class="listing-body">
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
    <div class="row">
      <div class="col-1">Data 1</div>
      <div class="col-1">Data 2</div>
      <div class="col-2">Data 3</div>
      <div class="col-1">Data 4</div>
    </div>
  </div>
</div>

Answer 1

我会创建一个类来补偿带有边距的滚动条;例如：

.ScrollBarCompensate{margin-right:15px;}

然后在滚动条存在时使用JQuery应用此类

$('.ScrollBarCompensate').hasScrollBar(); //returns true if scrollbar is present

然后您可以像这样添加类：

$( ".listing" ).addClass( "ScrollBarCompensate" );

或者，不要创建CSS类，只需在滚动条if语句中将内联CSS写入任何内容：

$(this).css('margin-right', "15px !important");

应用滚动条时如何对齐列内容

1 个答案: