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

float: left왼쪽의 항목을 사용하여 동일한 줄에 두 개의 항목을 갖고 싶습니다 .

나는 이것을 혼자 달성하는 데 아무런 문제가 없습니다. 문제는 브라우저 크기를 매우 작게 조정하더라도 두 항목 이 같은 줄에 유지 되기를 원한다는 것 입니다. 아시다시피 ... 테이블과 같은 방식입니다.

목표는 무엇을하든 오른쪽에있는 물품이 포장 되지 않도록하는 것 입니다.

CSS를 사용하여 브라우저에 랩을 감싸는 것보다 스트레칭하는div 방법을 알려 주면 어떻게 float: right;div가 아래에 float: left; div있습니까?

내가 원하는 것 :

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

이 크로스 브라우저 최소 너비 핵을 사용 <div>하는 컨테이너에 플로팅을 래핑하십시오 <div>.

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

당신은 할 수 있습니다 또한 일련의 "오버 플로우"그러나 아마하지 않도록해야합니다.

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

• !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 테이블이 필요하지 않습니다.

해결책 1 :

디스플레이 : 테이블 셀 (일반적으로 지원되지 않음)

해결책 2 :

테이블

(나는 해킹이 싫어.)

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

플로팅 된 블록 수준 요소가이 문제에 대한 최상의 솔루션인지 확인 하시겠습니까?

내 경험에 CSS 어려움이있는 경우 종종 내가 원하는 일을하는 방법을 볼 수없는 이유는 마크 업과 관련하여 터널 비전에 빠졌기 때문입니다. 요소 가이 작업을 수행 하는 것이 아니라 "?

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

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

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

패딩과 테두리가 너비에 추가되는 것을 방지하므로 예를 들어 요소가 항상 행에 유지됩니다. 너비가 33.33333 % 인 3 가지 요소

사용자가 창 크기를 가로로 줄이고 플로트가 세로로 쌓이는 경우 플로트를 제거하고 두 번째 div (플로트)는 margin-top : -123px (값) 및 margin-left : 444px (값)을 사용하십시오. 그들이 떠있는 것처럼 div를 배치하십시오. 이렇게하면 창이 좁아지면 오른쪽 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());
});