CSS를 사용하여“A”를“B”의 아래쪽 / 끝에“꽉”정렬하는 방법

9

현재 정렬 된 열의 헤더에 아이콘이 표시되는 "정렬 가능"테이블이 있습니다.

정렬 아이콘은 텍스트 끝에 표시됩니다 (즉, LTR / RTL을 지원합니다). 현재을 사용하고 display:flex있습니다. 그러나 테이블 너비가 줄어들고 열 머리글 텍스트가 줄 바꿈되기 시작하면 어떤 열이 정렬되어 있는지 명확하지 않은 모호한 상태가됩니다.

대신 다음 요구 사항을 충족하고 싶습니다.

줄 바꿈 셀 / 버튼이 더 넓은 경우에도 아이콘은 항상 가장 긴 텍스트 줄의 "끝"과 "단단하게"정렬됩니다 .
아이콘은 또한 마지막 텍스트 행에 맞춰 정렬되어야합니다.
아이콘이 자체 줄로 바뀌지 않아야합니다.
버튼이 있어야하며 셀의 전체 너비에 걸쳐 있어야합니다. (내부 스타일과 마크 업은 필요에 따라 변경 될 수 있습니다.)
가능한 경우에만 CSS와 HTML.
알려진 / 설정된 열 너비 또는 머리글 텍스트에 의존 할 수 없습니다.

예를 들면 다음과 같습니다.

나는 다른 조합의 무리와 함께 실험을 봤는데 display: inline/inline-block/flex/grid, position, ::before/::after, 심지어 float(!)하지만, 원하는 동작을 얻을 수 없습니다. 문제를 보여주는 현재 코드는 다음과 같습니다.

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
  width: 100%;
  display: flex;
  align-items: flex-end;
  font-weight: bold;
  line-height: 1.4;
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
}

<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          Age
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          Favorite Food
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          Favorite Color
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          Likes Neil Diamond?
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>

스 니펫 확장

이 UI를 달성하는 방법에 대한 아이디어가 있습니까? 이것은 아마도 테이블이나 버튼과 관련이 거의 없습니다. 실제로 나는 Thing A"단단하게"아래쪽 / 끝이 Thing B(가로 넓게 조정되고 텍스트를 Thing A줄 바꿈 할 수 있음 ) 정렬되어야 하지만 자체 줄로 줄 바꿈 할 수는 없습니다.

flex값을 엉망으로 만들려고 했지만 조합을 사용하면 텍스트가 너무 빨리 줄 바꿈됩니다.

— 로버트 브래드 포드
소스

나는 현재 CSS와 HTML을 사용하여 문제를 해결하기 위해 노력하지만 버튼 내가 여기에 CSS로 글꼴 최고 사용하기로 결정하고 HTML 때문에 두통이있다 결합 된 스팬 요소 예를 들어, 희망은 도움이

— 스탠 차콘

@stanchacon 감사합니다. 필자는 언급 했어야하지만 열 너비를 설정하거나 헤더 텍스트가 무엇인지 미리 알 수는 없습니다. 요구 사항에 # 6을 추가했습니다.

— robertwbradford

1

@stanchacon ... 그리고 나는 :) 권리에 대한 지금 RIBEYE 갈 수

— robertwbradford

@robertwbradford이 문제는 이미 해결 되었습니까? 아니면 여전히 해결책을 찾고 있습니까?

— Furqan Rahamath

@MohammedFurqanRahamathM, 이것은 아직 답변되지 않았습니다. 아직도 찾고 ...

— robertwbradford

1

이를 위해 JS가 필요하다고 생각하십시오. 다음은 5를 제외한 모든 조건을 충족해야하는 답변입니다.

const debounce = fn => {
  let frame;

  return (...params) => {
    if (frame) {
      cancelAnimationFrame(frame);
    }
    frame = requestAnimationFrame(() => {
      fn(...params);
    });
  };
};

const text = [...document.querySelectorAll(".text")];
const iconWidth = "1.25rem";

const positionIcon = () => {
  if (!text) return;
  
  text.forEach(t => {
    const width = t.getBoundingClientRect().width;

    const icon = t.nextElementSibling;
    if (!icon) return;
    
    icon.style.left = `calc(${width}px + ${iconWidth})`;
  });
};

positionIcon();
window.addEventListener("resize", debounce(positionIcon));

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
  width: 100%;
  font-weight: bold;
  line-height: 1.4;
  position: relative;
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  bottom: 1rem;
  left: 100%; /* no js fallback */
}

.sort svg {
  height: 1.25rem;
  width: 1.25rem;
}

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <svg id="arrow" viewBox="0 0 24 24" role="presentation"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</svg>
<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          <span class="text">Age</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          <span class="text">Favourite Food</span>
          <span class="sort">
          <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          <span class="text">Favorite Color</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          <span class="text">Likes Neil Diamond?</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
    </tr>
  </thead>
</table>

스 니펫 확장

— 솔
소스

1

시각적 모호성을 제외하고는 전혀 문제가 없다고 생각합니다. 여기 내 관찰이 있습니다.

실제로 항목은 단단히 묶여 있습니다. 달리 지정되지 않는 한 기본적으로 모든 요소는 다른 요소를 따릅니다.
왜 간격이 있습니까? 이 두 가지 변형이 있습니다
- 첫 번째 : 텍스트가 줄 바꿈 요소 안에없는 경우 (현재 상태) 이 시나리오에서는 명시 적으로 언급 된 너비가 없기 때문에 텍스트와 범위에 대해 너비가 자동으로 할당되고 텍스트가 범위 요소가 차지하는 1.25rem 너비를 제외한 모든 너비를 시도합니다. w3c 문서에 따르면, 텍스트 자리 맞추기는 완전히 다른 문제이기 때문에 규칙은 주어진 문자열에서 중단 점을 식별하기위한 간격 만 존재하지 않습니다. 대학에서 공부 한 표준 동적 프로그래밍 질문 인 이 방법 을 이해하려면 이 문제 를 참조하십시오 . 따라서 정당화를 수행하는 동안 간격이 존재하며 브라우저가 축소되지 않는 사용 가능한 너비를 기억하십시오.
- 둘째 : 텍스트가 줄 바꿈 요소 안에 있으면 span, p, div 등이 될 수 있습니다.이 경우 너비가 명시 적으로 지정되지 않으면 너비 자동 할당이 발생합니다. 그리고이 경우 실제로 inspect 요소에서 요소가 1.25rem 너비의 정렬 아이콘을 제외한 모든 공간을 차지하려고한다는 것을 알 수 있습니다.

그래서 꽉 경계 존재, 동적 간격이 시각적 모호성을 일으키는 단지 않습니다.

이제 완벽하지는 않지만 JavaScript 개입없이 얻을 수있는 가장 가까운 솔루션 인 솔루션을 소개합니다 .

텍스트를 요소 내부에 줄 바꿈

최대 너비를 지정하여이 텍스트의 너비를 제한하십시오.

button.button > span {
    max-width: 60%; // I saw this to be decent enough
    text-align: center; // This is to offset the visual effect of spacing
}

참고 : 이 text-align: center옵션을 사용하지 않아야하는 엄격한 요구 사항이없는 한 공간 부족으로 인한 영향을 줄이는 것입니다.

이것이 귀하의 질문에 해당되는지 알려주십시오.

이것이 효과가되는 방법입니다.

— 푸칸 라하 멧
소스

답장을 보내 주셔서 감사합니다. 이를 위해 우리는 마지막에 있어야합니다.

— robertwbradford

@ robertwbradford 나는 당신이 직면하고있는 가능한 문제를 설명하고 해결책을 제안하는 내 대답을 변경했습니다. 이것이 귀하의 질문에 대한 답변인지 알려주십시오.

— Furqan Rahamath

0

나는 당신이 거의 훌륭하고 약간의 트릭 인 (3)을 놓치고 있다고 생각합니다. 아이디어는 너비 0와 너비가 같은 아이콘 요소를 만들고 텍스트와 정렬 아이콘 사이의 공백을 비활성화하는 것입니다. 이를 위해 텍스트에 추가 래퍼를 사용하고 flexbox 사용을 제거했습니다.

오버플로가 발생하지만 패딩을 적용하므로 문제가되지 않습니다. padding-right원하는 경우 증가시킬 수도 있습니다

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size:0;
  border: 0;
  background-color: transparent;
  width: 100%;
  font-weight: bold;
  line-height: 1.4;
}
.button > span {
  font-size: 0.875rem;
}
.sort {
  width: 0;
  height: 1.25rem;
  display: inline-block;
  vertical-align: bottom;
}

<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          <span>Age</span>
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          <span>Favorite Food</span>
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          <span>Favorite Color</span>
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          <span>Likes Neil Diamond?</span>
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>

스 니펫 확장

— 테마 니 Afif
소스

답장을 보내 주셔서 감사합니다. 몇 가지 좋은 점이지만 화살표가 가장 긴 텍스트 행의 끝과 정렬되어야하는 "요구 사항 1"을 충족하지 않는 것으로 보입니다. "Favorite Color"의 경우 "Color"가 두 번째 줄로 줄 바꿈 될 때 아이콘은 마지막 스크린 샷과 같이 "Favorite"의 끝과 수평으로 정렬되어야합니다.

— robertwbradford 2014

1

@robertwbradford 아는 그런 식으로 이해하지 못했습니다 .. 나는 그것이 마지막으로 꽉해야한다고 생각했다. 나는 당신 이이 요구 사항에 대해 운이

— 없다고

0

thead 제목이 동적이 아닌 경우 매우 쉽게 고칠 수 있습니다.

이를 위해 제목의 마지막 단어와 svg 아이콘을 함께 배치해야합니다.

예 : -html

<button>
 Long 

<span> title 
 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</span>
</button>

.button 클래스에서 display : flex를 제거하고 추가 된 범위에 스타일 display : inline-block을 지정하십시오.

스팬이 인라인 블록이기 때문에 svg 아이콘은 절대 별도의 줄에 있지 않습니다. 그 앞에 적어도 한 단어가있을 것입니다

— 쉴 리쉬 마하라 얀
소스

답장을 보내 주셔서 감사합니다. 제목 텍스트는 동적 인 것, 그래서 나는 :(, 구성 요소로이 건물입니다

— robertwbradford

J를 사용하여 마지막 단어를 범위에 넣을 수 있습니다. 그렇게

— 쉬워서

0

당신은 다음과 같이 시도 할 수 있습니다 :

<style>

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}


.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
    
 /* display: flex;
  align-items: flex-end;*/
  font-weight: bold;
  line-height: 1.4;
  float: left;
}
@media only screen and (min-width:502px)
{.button {
    width: calc(192px - 89px);
  }
  .button.food {
    width: calc(214px - 89px);
}
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}
.sort svg {
  position: absolute;
}
</style>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          Age
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button food">
          Favorite Food
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          Favorite Color
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          Likes Neil Diamond?
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>

스 니펫 확장

이 답변이 도움이 되길 바랍니다. 모바일보기를위한 CSS를 만들지 않았습니다!

— 크리슈나 사 바니
소스