时间戳

首页 > 解决方案 > 是否可以动态调整列的数据单元格以使它们出现在同一垂直线上？

css - 是否可以动态调整列的数据单元格以使它们出现在同一垂直线上？

问题描述

很长一段时间以来，我一直在努力解决 CSS 中的这个问题。我有一个包含 3 列的表格，其中显示了出发时间、时间和情况文本，以防延误或取消。但是，正如您在图片中看到的那样，由于第 2 列具有动态文本，因此第 3 列永远不会正确对齐。我已经尝试了很多不同的 CSS 属性，但到目前为止没有任何帮助。可能是由于 margin-left 和 margin-right 属性吗？

桌子

CSS

.busStop .tilerow {
display: flex;
border-bottom: 2px solid var(--tavla-border-color);
padding: 1rem 0 0.75rem 0;

&__icon {
    min-width: 2rem;
    margin-right: 1rem;
    font-size: 2rem;
}

&__label {
    margin: 0;
    margin-top: 0.25rem;

}

&__sublabel {
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 7px;
    margin-left: auto;
    margin-right: 72%;
    min-width: 5rem;
    white-space: nowrap;    
    
    &__cancellation {
        background-color: $colors-brand-white;
        border-radius: 0.5rem;
        height: 0.875rem;
        overflow: visible;
        width: 0.875rem;
    }

    &__situation {
        font-size: 1.125rem;
        height: 1.25rem;
        margin-left: 72%;
        width: 0.875rem;
        
        }
    }
}

索引.ts

导出函数 TileRow({ label, icon, subLabel }: Props): JSX.Element { return (

        <div className="tilerow">
            <div className="tilerow__icon">{icon}</div>
            <Heading3 className="tilerow__label">{label}</Heading3>
            <div className="tilerow__sublabel">
            {subLabel.time}
            <SubLabelIcon subLabel={subLabel} /> 
            </div>
        </div>
)

}

标签： cssreactjstypescriptsass

解决方案

当您display: flex在.tilerow所有行上使用时都是独立的，因此第三列（Avgang）的宽度差异。

display: gridon .busStop（不再flex）将是更好的西装。

这是一个快速的片段，当然需要适应 React

.busStop {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
}

/* Because .tilerow__* aren't direct children of .busStop */
.tilerow {
  display: contents;
}

.tilerow__item {
  margin: 0;
  padding: 1em;
  padding-left: 0;
  border-bottom: 1px solid grey;
}

.tilerow__label {
  font-size: 1rem
}
<div class="busStop">
  <div class="tilerow">
    <div class="tilerow__item tilerow__icon">{icon}</div>
    <h3 class="tilerow__item tilerow__label">{label}</h3>
    <div class="tilerow__item tilerow__time">Nå</div>
    <div class="tilerow__item tilerow__sublabel">{subLabel}</div>
  </div>
  <div class="tilerow">
    <div class="tilerow__item tilerow__icon">{icon}</div>
    <h3 class="tilerow__item tilerow__label">{label}</h3>
    <div class="tilerow__item tilerow__time">Nå</div>
    <div class="tilerow__item tilerow__sublabel">{subLabel}</div>
  </div>
  <div class="tilerow">
    <div class="tilerow__item tilerow__icon">{icon}</div>
    <h3 class="tilerow__item tilerow__label">{label}</h3>
    <div class="tilerow__item tilerow__time">1 min</div>
    <div class="tilerow__item tilerow__sublabel">{subLabel}</div>
  </div>
  <div class="tilerow">
    <div class="tilerow__item tilerow__icon">{icon}</div>
    <h3 class="tilerow__item tilerow__label">{label}</h3>
    <div class="tilerow__item tilerow__time">2 min</div>
    <div class="tilerow__item tilerow__sublabel">{subLabel}</div>
  </div>
  <div class="tilerow">
    <div class="tilerow__item tilerow__icon">{icon}</div>
    <h3 class="tilerow__item tilerow__label">{label}</h3>
    <div class="tilerow__item tilerow__time">10 min</div>
    <div class="tilerow__item tilerow__sublabel">{subLabel}</div>
  </div>
</div>

编辑：请注意，在这种情况下，我认为使用<table>不会是一个坏主意。

推荐阅读