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

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

같은 라인에 있는 두개의 아이템을 사용하고 싶습니다.float: left왼쪽에 있는 항목에 대해.

저 혼자서는 아무 문제가 없습니다.문제는 브라우저 크기를 아주 작게 조정해도 두 항목이 동일한 라인을 유지하기를 원한다는 것입니다.있잖아요...테이블이 어떻던가요?

오른쪽에 있는 물건은 무조건 포장하지 않게 하는 것이 목표입니다.

CSS를 사용하여 브라우저에 내용물을 포장하는 것보다 확장하는 것이 낫다는 것을 어떻게 말해야 할까요?float: right;div는 아래에 있습니다.float: left; div?

내가 원하는 것:

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

또 다른 옵션은 부동한 대신 공백 속성 nowrap을 상위 div로 설정하는 것입니다.

.parent {
     white-space: nowrap;
}

그리고 화이트 스페이스를 재설정하고 인라인 블록 디스플레이를 사용하여 디브들이 동일한 라인에 머물면서도 폭을 줄 수 있습니다.

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

JSFiddle: https://jsfiddle.net/9g8ud31o/

떠다니는 것을 싸세요.<div>용기에 담긴 s<div>이 교차 스펙트럼 최소폭 해킹을 사용합니다.

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

또한 "오버플로우"를 설정해야 할 수도 있지만 설정하지 않을 수도 있습니다.

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

• 그!important선언문과 결합된min-widthIE7+에서 모든 것이 동일한 라인에 머물도록 합니다.
• IE6가 구현되지 않음min-width, 하지만 그런 버그가 있습니다.width: 100px우선 순위를 지정합니다.!important선언으로 인해 컨테이너 폭이 100㎛가 됩니다.

플로터를 플로터의 합계 너비+한계보다 큰 최소 너비의 디브로 감습니다.

해킹이나 HTML 테이블이 필요 없습니다.

해결책 1:

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

해결책 2:

테이블들

(해크는 싫어요.)

다른 옵션:오른쪽 열을 띄우지 말고 왼쪽 여백을 두어 띄우기만 하면 됩니다.IE6를 고치려면 한두 번의 해킹이 필요하겠지만, 그것이 기본적인 생각입니다.

이 문제에 대해 플로팅된 블록 레벨 요소가 최선의 해결책이라고 확신하십니까?

제 경험상 CSS가 어려운 경우가 많은데, 제가 원하는 일을 할 수 있는 방법을 찾을 수 없는 이유는 마크업과 관련하여 터널 비전에 걸려들었기 때문입니다("어떻게 하면 이 요소들이 이것을 할 수 있을까?"라는 생각이 듭니다)." )로 돌아가서 제가 달성해야 할 정확한 것이 무엇인지 살펴보는 것보다, 그것을 용이하게 하기 위해 제 html을 약간 다시 작업할 수도 있습니다.

저는 이 문제에 대해 테이블을 사용하는 것을 추천합니다.비슷한 문제가 있는데 표를 메인 페이지 레이아웃이 아닌 일부 데이터를 표시하는 데만 사용하면 됩니다.

이 선을 띄운 요소 선택기에 추가

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

너비에 패딩과 테두리가 추가되는 것을 방지하므로 너비가 33.33333%인 세 개의 요소가 있더라도 요소는 항상 열을 유지합니다.

사용자가 창 크기를 수평으로 줄여 플로트가 수직으로 쌓이면 플로트를 제거하고 두 번째 디브(플로트였던)에서 마진-탑: -123px(사용자 값) 및 마진-좌: 444px(사용자 값)를 사용하여 플로트와 함께 나타나는 디브를 배치합니다.이렇게 하면, 창이 좁아지면 오른쪽 디브가 제자리에 있다가 페이지가 너무 좁아져서 포함할 수 없을 때 사라집니다. 사용자가 브라우저 창을 좁힐 때 오른쪽 디브가 왼쪽 디브 아래로 "점프"하는 것보다 더 낫습니다.

제가 이 문제를 해결한 방법은 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());
});

언급URL : https://stackoverflow.com/questions/266015/how-do-i-keep-css-floats-in-one-line