html - 화면 - span 오른쪽 정렬




직책 기반의 반응적인 텍스트 정렬 (3)

질문에 첨부 된 이미지에서 제시 한대로 정확하게 작동하는 CSS 전용 솔루션이 있습니다. 그러나 그것은 하나의 중요한 요소에 달려 있기 때문에 진정한 답이 아닐 수도 있습니다 - 모든 최상위 메뉴 항목의 너비가 동일해야합니다. 이제 이것은 첨부 된 이미지에 표시되는 경우이지만 실제 구현에는 해당하지 않을 수 있습니다.

n 변수와 함께 CSS3 nth-child 선택기를 사용하면 매 3 번째 또는 4 번째 등의 최상위 메뉴 항목을 모두 타겟팅 할 수 있습니다. 대상 항목의 스타일을 지정하여 드롭 다운 메뉴를 올바르게 정렬 할 수 있습니다. 따라서 한 화면에 하드 코딩 된 솔루션의 경우 행의 최상위 메뉴 항목 수를 계산하고 이것을 n 배수로 설정합니다. 예를 들어, 메뉴가 6 개 항목 뒤에 줄 바꿈 된 경우 각 행의 마지막 항목을 스타일링하려면 다음과 같이 설정하십시오.

.top-level-item:nth-child(6n) > .dropdown-container > .sub-item {
    float: right;
    clear: right;
}

그러나 실제 구현에서는 오른쪽 맞춤 메뉴의 스타일을 지정해야합니다.

물론 이것은 같은 너비를 가진 모든 메뉴 항목에 달려 있습니다. 메뉴에 행이 2 개 이상 있고 메뉴 항목의 너비가 다른 경우 각 행에 다양한 요소가있을 수 있습니다.이 경우 nth-child 선택기가 반드시 각 행의 끝 자식을 대상으로하지는 않습니다.

이제 모든 화면 크기에 대해이 작업을 수행하려면 모든 최상위 항목의 고정 너비가 동일하면 창의 너비와 관계없이 행당 얼마나 많은 항목이 있는지 찾아야합니다. 안타깝게도 calc() 는이 애플리케이션에 너무 제한적이다. 그러나 최상위 항목의 너비가 고정되어 있고 그 너비가 무엇인지 알면 각 사례에 대해 일련의 @media 문을 사용할 수 있습니다.

예를 들어 여백과 너비를 함께 사용하면 최상위 항목의 너비가 230px가됩니다. 즉, 창의 너비가 230 * 3 = 690px보다 작 으면 각 행에 2 개의 항목이 있습니다. 창의 너비가 230 * 4 = 920 픽셀 미만이고 690 픽셀보다 크면 각 행에 3 개의 항목이 있습니다. 그리고 가장 큰 창 크기까지 필요한 것입니다. 위의 nth-child 예제를 사용하면 각 행 크기를 대상으로하는 일련의 미디어 쿼리가 다음과 같이 표시됩니다.

@media (max-width: 690px) {
    /* less than 3 items per row */
    .top-level-item:nth-child(2n) > .dropdown-container > .sub-item {
        float: right;
        clear: right;
    }
}
@media (max-width: 920px) and (min-width: 691px) {
    /* less than 4 items per row */
    .top-level-item:nth-child(3n) > .dropdown-container > .sub-item {
        float: right;
        clear: right;
    }
}
@media (max-width: 1150px) and (min-width: 921px) {
    /* less than 5 items per row */
    .top-level-item:nth-child(4n) > .dropdown-container > .sub-item {
        float: right;
        clear: right;
    }
}
...
/* and so on */

이것의 구현을 보여주는 펜은 https://codepen.io/jla-/pen/GYJQMq 있습니다. 자바 스크립트는 드롭 다운 메뉴를 클릭 할 때만 토글 할 수 있습니다.

가변 너비가있는 최상위 메뉴 항목의 경우 또는 너비가 같지만 값이 무엇인지 모르는 경우 현재 CSS가 원하는대로 할 수있는 강력한 기능이라고 생각하지 않습니다. 이상적으로 행의 항목 수를 얻으려면 .top-level-item:nth-child(calc((100vw/--itemwidth)-(100vw%--itemwidth)) 를 사용하면되지만 CSS는 그런 종류의 권력을 벗어난 아주 먼 길입니다.

나는 이것에 대한 대답이 '아니오'라고 생각하지만, 나는보다 과감한 변화를하기 전에 뭔가를 놓치지 않기를 원한다.

CSS를 통해 요소의 정당성을 변경하거나 화면의 왼쪽 또는 오른쪽 방향으로 방향이 바뀌는 지 여부를 기반으로 요소를 변경하는 방법이 있습니까?

이것에 대한 직접적인 속성은 없지만 아마도 가상 셀렉터 또는 요소가 포함 된 해킹과 같은 방법을 놓친 경우 볼 수 있습니다.

현재의 곤경의 시위 :

나는 <a> 링크와 <a> 링크를 혼합하여 제공하는 네비게이션 바를 가지고있다. 꽤 표준이며 더 넓은 화면에서 잘 작동합니다.

사용할 수있는 화면 공간이 적 으면 nav은 의도 한대로 다음 행으로 넘어갑니다. 이것은 바람직한 결과입니다. 그러나 때로는 드롭 다운 메뉴가 화면에서 잘리지 않을 수 있는데, 이는 그리 바람직하지 않습니다.

모바일 장치에 대해 크게 다른 스타일을 제공하는 대신 (내 대체 계획은 드롭 다운 메뉴를 postion: fixed 를 통해 대화 상자와 같은 선택 항목으로 제시하는 것입니다 position: absolute , position: absolute 화면이 아닌 작은 화면에 postion: fixed 됨) 내 요소를 통해 자신의 모험을 알게되고 text-align: right 대한 필요성이 text-align: right 과 왼쪽의 좌표보다 왼쪽의 좌표보다 오른쪽의 좌표를 사용하여 절대 위치를 조정할 가능성이 있습니다 :

내가 자바 스크립트를 통해 이것을 관리 할 수 ​​있지만, 이미 발생하는 리스너 이벤트가 충분하고 자바 스크립트를 피하는 좀 더 우아한 응답을 제공하고자한다. css 전용 방법이 없다면 고정 위치 대안을 대신 계획 b로 사용할 수 있습니다.

설명 :

원래 모바일 장치에서 이러한 곤경을 해결하기 위해 미디어 쿼리를 사용하기를 기대했지만 작은 화면 크기에서만 나타나는 것이지만 이것이 당연한 것으로 여길 수는 없다는 것을 깨달았습니다.

예를 들어 탐색 항목의 수는 앞으로 증가 할 수 있으며 모든 화면 크기에서이 상황을 나타낼 수 있습니다. 화면 오른쪽에 드롭 다운 메뉴가 있어야합니다.

아직 테스트하지 않은 장치가 예상하지 못한 크기로 문제를 복제하지 않는다고 보장 할 수도 없습니다.

나의 요점은 스크린 크기의 미디어 쿼리에 의존 할 수있는 방법이 없다는 것입니다. 내 솔루션이 있다면, 화면의 요소 위치에 반응해야한다고 생각합니다. 그래서 자바 스크립트가 아닌 솔루션에 대해서는 불만이들 것 같습니다.

둘째 : 내용이 동적이며 가능한 페이지와 마찬가지로이를 수용하기 위해 속성을 동적으로 변경해야하는 요소 (항목 순서, 개수, 너비 등)를 가정합니다. 나는이 영역의 더 세밀한주의 사항을 찾고있는 누군가를 원래의 질문에 의뢰해야한다 : CSS를 통해서만 요소의 정당화를 바꾸거나 화면의 왼쪽이나 오른쪽 방향으로 방향을 바꾼다는 것을 근거로 한 요소의 정당성을 바꾸는 수단이 있는가?

샘플 코드 :

요청에 따라 여기에 샘플 코드가 있습니다. 나는이 시나리오에서 그것을 포함하는 것이 좋은 생각이라고 생각하지 않는다. (비록 대부분의 질문에서 중요성을 이해한다.) 문제는 내 특정 코드와 관련이 없으며 CSS를 동적으로 수정하는 능력에 의문을 제기하는 것과 관련이있다. 어떤 시나리오에서든 화면 위치 나 화면 가장자리 인식에 기반한 속성 (들) - 따라서 질문을 설명하기위한 선호.

이 코드는 내 자신의 단순화 된 버전이지만, CSS의 :hover 를 통해 드롭 다운을 제공하는 친숙한 <ul> 탐색 메뉴의 거의 모든 변형을 사용하여 질문 할 수 있습니다.

이를 염두에두고, 만약 당신이 내 코드를 통해 문제를 풀려고 노력한다면, 나의 처지를 잘못 설명했을 수도 있습니다. 나는 CSS가 현재 푸시 될 수있는 범위에 정통하다고 믿고 'javascript 없이는 가능하지 않다'라고 대답하지만 단지 요소 속성을 동적으로 변경하기 위해 영리한 해결 방법 / 해킹을 놓친 적이 없다는 것을 확신합니다. 화면 위치에 기반한 CSS를 통해 (질문을 반복 해 주셔서 죄송합니다. 이해가 되시길 바랍니다. 감사.

<ul class="nav nav__container">

    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li class='nav nav__item nav__item--dropdown'><li><a href="#">Dropdown Label</a></li>
        <ul class='nav nav__dropdown'>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
        </ul>
    </li>

</ul>

텍스트 정렬을 조정할 때 필요에 맞게 미디어 쿼리를 작성하십시오. 미디어 쿼리 내에서 테스트의 양쪽 정렬 된 속성을 변경할 수 있습니다. 요구 사항에 따라 다른 디스플레이 크기에 대해 다른 미디어 쿼리를 사용하십시오. 예를 참조하십시오.

@media only screen and (max-width: 600px) {
selector {
    property : value;
}
}

핵심 질문에 대한 답과 같습니다.

CSS를 통해 요소의 정당성을 변경하거나 화면의 왼쪽 또는 오른쪽 방향으로 방향이 바뀌는 지 여부를 기반으로 요소를 변경하는 방법이 있습니까?

아니야.

좀 더 철저한 후속 답변으로 나는 더 작은 화면 크기로 고정되는 스타일 드롭 다운 메뉴의 원래 계획 B와 함께 가지 않을 것이라고 언급했습니다. 내 질문에 이것에 암시했지만 드롭 다운 메뉴가 앞으로 잘릴 수 있는지 결정하기 위해 화면 크기에 의존 할 수 없다는 것이 더욱 분명 해졌다. 따라서 미디어 쿼리가 배제되었다는 것을 감안할 때 어떤 장치에도 부적절한 솔루션을 제공하지 않으려면 다른 솔루션이 필요합니다.

어느 자바 스크립트 날 나뭇잎. 나는 이것을 피하려고 노력하고 있었지만,이 단계에서 결과가 주어진다면 나는 완고하게 될 것입니다.

방법

다른 사람에게 익숙해 지도록 jquery 를 사용하여 드롭 다운 메뉴를 가리 키도록 수신기를 제공합니다. 논리는 특정 클래스의 모든 요소가 다른 클래스의 <ul> 로 구성된 드롭 다운 메뉴를 가질 수 있다는 것입니다. 그래서 나는 쉽게 둘 다 타겟팅 할 수 있습니다.

드롭 다운 메뉴가 화면의 오른쪽 또는 왼쪽에 있는지 확인할 수 있습니다. 이것은 잘 작동합니다. 까다 롭다면 차라리 메뉴는 화면 오른쪽에서 약 200 픽셀 (내 역동적 인 내용에 대한 안전한 임계 값)이 아니면 않는 한 왼쪽으로 정렬 할 수 있습니다. 내가 가서 각 드롭 다운 너비를 측정하고 문제가 생기면 임계 값으로 사용할 수 있습니다.

이 모든 것을 모으는 것. 드롭 다운 메뉴 위로 마우스를 가져 가면 화면 오른쪽에서 200 픽셀 미만으로 표시되며 부모 메뉴 라벨의 오른쪽에 드롭 다운 메뉴가 오른쪽 및 절대 위치로 정당화됩니다 / 트리거 (내 원래 그림에서 보여준대로). 이 작업을 수행하는 데 더 유연하고 짧은 버전이 있으며 라이브러리를 피하는 사람이라면 jquery 없이는 할 일이별로 없습니다.

JS 코드

$(nav).on('mouseover', '.dropdown', function() {

    var dropdownlist = $(this).children('ul');
    var screenWidth = $(window).width();
    var parentOffsetLeft = $(this).offset().left;
    var spaceRight = screenWidth - parentOffsetLeft;

    if (spaceRight < 200) {

        $(dropdownlist).css('text-align', 'right');
        $(dropdownlist).css('right', '0');
        $(dropdownlist).css('left', 'initial');

    } else {

        $(dropdownlist).css('text-align', 'left');
        $(dropdownlist).css('left', '0');
        $(dropdownlist).css('right', 'initial');

    }

});

이 자바 스크립트를 사용하여 질문에 설명 된 솔루션을 다시 만들 수 있습니다.





css