CSS 플로트를 한 줄로 유지하려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/266015

문제

나는 같은 줄에 두 개의 항목을 사용하고 싶습니다. float: left 왼쪽에있는 항목의 경우.

나는 이것을 혼자서 달성하는 데 아무런 문제가 없습니다. 문제는 두 항목을 원한다는 것입니다. 머무르다 같은 줄에 브라우저를 매우 작게 크기를 조정하더라도. 당신은 알다시피 ... 테이블과 함께 있었던 것처럼.

목표는 오른쪽에 항목이 포장되지 않도록하는 것입니다. 무슨 일이 있어도.

CSS를 사용하여 브라우저를 말하는 방법 오히려 함유를 스트레칭하십시오 div 그것을 마무리하는 것보다 float: right; div는 아래에 있습니다 float: left; div?

내가 원하는 것 :

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
도움이 되었습니까?

해결책

떠 다니십시오 <div>컨테이너에 s <div> 이 크로스 브라우저 Min-Width Hack을 사용합니다.

.minwidth { min-width:100px; width: auto !important; width: 100px; }

너 5월 또한 "오버플로"를 설정해야하지만 아마도 그렇지 않을 것입니다.

이것은 다음과 같이 작동합니다.

  • 그만큼 !important 선언, 결합 min-width IE7+에서 모든 것이 같은 라인에 머물게됩니다.
  • IE6은 구현되지 않습니다 min-width, 그러나 그것은 버그가 있습니다 width: 100px 그 이상 !important 선언, 컨테이너 너비가 100px가됩니다.

다른 팁

또 다른 옵션은 플로팅 대신 흰색 공간 속성을 부모 div로 설정하는 것입니다.

.parent {
     white-space: nowrap;
}

흰색 공간을 재설정하고 인라인 블록 디스플레이를 사용하여 DIV가 같은 라인에 유지되지만 여전히 너비를 줄 수 있습니다.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

JSFiddle은 다음과 같습니다. https://jsfiddle.net/9g8ud31o/

플로터의 결합 너비+마진보다 최소 폭으로 부유물을 div로 감싸십시오.

해킹이나 HTML 테이블이 필요하지 않습니다.

Solution 1:

디스플레이 : 테이블 셀 (널리 지원되지 않음)

Solution 2:

테이블

(나는 해킹이 싫다.)

다른 옵션 : 오른쪽 열을 떠 다니지 마십시오. 플로트 너머로 이동하기 위해 왼쪽 여백을주십시오. IE6을 수정하려면 해킹이 필요하지만 이것이 기본 아이디어입니다.

부유 한 블록 레벨 요소 가이 문제에 대한 최상의 솔루션이라고 확신합니까?

내 경험상 CSS의 어려움으로 종종 내가 원하는 일을하는 방법을 볼 수없는 이유는 마크 업과 관련하여 터널 vision에 걸렸다는 것입니다 (생각하는 방법”은 어떻게 만들 수 있습니까? 이것들 요소 이것? ") 돌아가서 정확히 무엇을 달성 해야하는지 바라 보는 것이 아니라 HTML을 약간 재 작업하여 그것을 용이하게합니다.

이 문제에 테이블을 사용하는 것이 좋습니다. 비슷한 문제가 있고 테이블이 일부 데이터를 표시하는 데 사용되는 한 메인 페이지 레이아웃이 아닌 경우 괜찮습니다.

이 라인을 플로팅 된 요소 선택기에 추가하십시오

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

패딩과 경계가 너비에 추가되는 것을 방지하므로 요소가 예를 들어 있어도 항상 연속으로 유지됩니다. 너비가 33.33333% 인 3 가지 요소

사용자가 창 크기를 수평으로 줄이고 플로트가 수직으로 쌓이면 플로트를 제거하고 두 번째 div (플로트)에서 마진 탑을 사용합니다 : -123px (값) 및 마진-왼쪽 : 444px (값)를 사용합니다. 부유물로 나타날 때 DIV를 배치하십시오. 이런 식으로 완료되면 창문이 좁아지면 오른쪽 DIV가 제자리에 유지되고 페이지가 너무 좁을 때 사라집니다. ... 사용자가 브라우저 창을 좁힐 때 오른쪽 부위 "점프"를 왼쪽 DIV 아래로 내리는 것보다 (나에게) 더 낫습니다.

내가 이것을 돌아 다니는 방식은 jQuery를 사용하는 것이 었습니다. 내가 이런 식으로 한 이유는 A와 B가 비율이기 때문입니다.

HTML :

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS :

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery :

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top