552

각 열마다 가변 너비를 가질 수있는 2 열 div 레이아웃을 원합니다.

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

스 니펫 확장

'view'div가'tree'div가 필요한 공간을 채운 후 사용 가능한 전체 너비로 확장되기를 원합니다.

현재 내 '보기'div가 포함 된 내용으로 크기가 조정됩니다. 두 div가 전체 높이를 차지하는 경우에도 좋습니다.

면책 조항이 아님 :

float : left가 설정 되어 있으면 왼쪽의 너비가 고정 되어 있기 때문에 div를 최대 너비로 확장하십시오 .
div에 대한 도움말- 왼쪽에 정렬 된 두 개의 열이 필요하므로 div가 나머지 너비에 맞도록 만드십시오.

html css multiple-columns

— 아누 라그 유니 얄
소스

1

관련 stackoverflow.com/a/22719552/759452

— Adrien Be

1

너비와 높이가 모두 불편으로 고정되어 있기 때문에 질문을 이해하지 못하거나 허용되는 답변을 선택하는 방법을 이해하지 못합니다.overflow hidden

— user10089632

1013

이것에 대한 해결책은 실제로 매우 쉽지만 전혀 분명 하지 않습니다 . 특정 방식으로 플로트와 상호 작용하는 "블록 서식 컨텍스트"(BFC)라는 것을 트리거해야합니다.

두 번째 div를 가져 와서 float을 제거한 다음 overflow:hidden대신하십시오. visible 이외의 오버플로 값은 설정된 블록을 BFC로 만듭니다. BFC는 하위 플로트가 이스케이프를 벗어나거나 형제 / 조상 플로트가 침입하는 것을 허용하지 않습니다. 여기에서 순 효과 는 부동 div가 그 일을 수행하고 두 번째 div는 일반 블록 이되어 float가 차지하는 너비를 제외한 모든 사용 가능한 너비 를 차지한다는 것입니다 .

IE6 및 7에서 hasLayout을 트리거해야 할 수도 있지만 현재 모든 브라우저에서 작동해야합니다.

시민:

왼쪽 고정 : http://jsfiddle.net/A8zLY/5/
고정 권리 : http://jsfiddle.net/A8zLY/2/

— 잔 티르
소스

28

훌륭한 답변! 그러나 "자동 이외의 오버플로 값"이라고하면 BFC가됩니다. 의미하는 것은 기본값 (표시) 이외의 오버플로 값 이 BFC가된다는 것입니다. 실제로 오버플로 자동도 완벽하게 작동합니다. 즉, 내가 권장하는 것입니다 (해당 div에서 상대적으로 배치 된 요소가있는 경우를 대비하여).

— BT

52

이 문서에서는 좋은 설명이 colinaarts.com/articles/the-magic-of-overflow-hidden

— 맥스 캔터

1

내용이 div를 오버플로 할만 큼 충분히 크면 어떻게됩니까?

— giannis christofakis

11

아이들의 순서가 중요하다는 점에 유의하는 것이 중요합니다. 너비가 고정 된 부동 요소는 다른 너비보다 높아야합니다. 전환 명령으로 저에게 효과가없는 이유를 알아 내기에는 너무 오래 걸렸습니다.

— Riplexus

2

: 나는 여기에서 찾을 수 있습니다 다윗과 보리스에 의해 주어진 응답에 따라 모든 것을가 트리거 BFC의 보이지 않는 오버 플로우, 이유를 설명하는 답변을 쓴 stackoverflow.com/questions/9943503/...은 내 해석이 올바른되었다?

— BoltClock

104

방금 flex 상자의 마법을 발견했습니다 (디스플레이 : flex). 이 시도:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

플렉스 박스는 CSS가 15 년 동안 바라던 컨트롤을 제공합니다. 마침내 여기! 자세한 정보 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

— BT
소스

나는 당신이 무엇을 발견 모르겠지만, 코드 최신 크롬에서 작동하지 않습니다 jsfiddle.net/fjb548kw/3

— 예브게니 Afanasyev

@YevgeniyAfanasyev "float : left;"를 제거했습니다. 문제를 해결하십시오. 메모 주셔서 감사합니다!

— BT

감사합니다. 왜 flex-grow: 100;대신에 이유가 있는지 설명해 주 flex-grow: 1;시겠습니까?

— Yevgeniy Afanasyev

2

@YevgeniyAfanasyev 그것이 특별한 이유는 없습니다. #a를 설정 flex-grow:10한 다음 #b를 설정하여 #a를 설정 flex-grow: 90하면 #a는 선 너비의 10 %이고 #b는 선 너비의 90 %가됩니다. 플렉스 너비 스타일을 가진 다른 요소가 없다면 기술적으로 중요하지 않습니다.

— BT

이것은 입력과 버튼을 마치 하나의 것처럼 나란히 배치하려고 노력하면서 저에게 가장 효과적이었습니다.

— Souleste

28

Flexbox 솔루션

이것이 flex-grow속성의 목적입니다.

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

스 니펫 확장

참고 : 지원되는 브라우저에 필요한 경우 플렉스 공급 업체 접두사를 추가하십시오 .

— 레지 핑크 햄
소스

27

이것은 테이블과 관련하여 사소하고 CSS와 관련하여 어려운 (적어도 브라우저 간 의미에서 불가능하지는 않지만) 좋은 예입니다.

두 열의 너비가 모두 고정되어 있으면 쉬울 것입니다.

열 중 하나의 너비가 고정되어 있으면 약간 어렵지만 완전히 수행 할 수 있습니다.

두 열의 가변 너비를 사용하면 IMHO에서는 2 열 테이블 만 사용하면됩니다.

— 클레 투스
소스

11

작은 장치에서 오른쪽 열을 왼쪽 아래로 슬라이드하려는 반응 형 디자인에서는 테이블이 그리 좋지 않습니다.

— S ..

1

테이블 작업에 어떤 반응 디자인 트릭이있다는 : css-tricks.com/responsive-data-tables

— 리키

나는 종종 두 개의 개별 레이아웃을 완전히 디자인하고 미디어 쿼리를 사용하여 모바일에서 변경하는 경향이 display:none;있으며 슬라이딩 스케일에서 가능한 한 100 % 반응하게 만드는 반면 터치 스크린 느낌을 사용하는 모바일을 위해 디자인을 완전히 변경하는 것이 더 좋은 경우가 있습니다 버튼 스타일.

— Bysander

22

이 솔루션을 확인하십시오

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

스 니펫 확장

— angel.dimitrov
소스

2

오버플로를 숨기는 것이 항상 바람직한 것은 아니기 때문에 이것은 일반적으로 우수한 솔루션입니다.

— Joseph Lennox

3

OP 당 : "각 열마다 가변 너비를 가질 수있는 2 열 div 레이아웃이 필요합니다." 답에서 첫 번째 열의 너비를 알아야하므로 가변적이지 않습니다. 두 열 모두에 고정 너비를 설정하고 플로팅 할 수도 있습니다.

— Jacob Alvarez

17

사용 calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

스 니펫 확장

이것의 문제는 모든 너비를 명시 적으로 정의해야한다는 것입니다 (값과 px가 잘 작동 함) 또는 명시 적으로 정의 된 것의 백분율로.

— 조엘 모세
소스

15

여기에 도움이 될 것입니다 ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

스 니펫 확장

— a6hi5h3k
소스

+1 예제가 작동하는 것처럼 보이지만 실제 시나리오에서는 트리 뷰가 100 %가 아니기 때문에 '보기'의 내용이 '트리'div로 어떻게 변하는 지 약간의 자바 스크립트로 인해 트리 높이가 작거나 작아 질 수 있습니다. 내가보기 내용을 볼 수

— 아 누락 Uniyal

이 경우 왼쪽 열의 최대 너비를 알고 있으면 최대 너비 스타일을 지정하거나 (IE에서는 작동하지 않음) margin-left (IE의 이중 마진 버그에주의)를 생각할 수 있습니다. 패딩 왼쪽.

— a6hi5h3k

대단 했어! 일회성 솔루션으로 인라인으로 사용하고 있습니다.<div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>

— ajwest

5

사람들이 왜 이전 TABLE태그를 사용하는 것이 쉬운 간단한 기둥 형 레이아웃을위한 순수한 CSS 솔루션을 찾기 위해 열심히 노력하고 있는지 이해가되지 않습니다 .

모든 브라우저는 여전히 테이블 레이아웃 로직을 가지고 있습니다. 공룡이라고 불러도 도움이됩니다.

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

스 니펫 확장

브라우저 간 호환성 측면에서도 훨씬 덜 위험합니다.

— PatM
소스

2

예, 그러나 모든 것이 CSS에 의해 수행되고 있다면 이것이 가능하지 않은 경우 적어도 호기심이 있습니까?

— Anurag Uniyal

2

media-queries작은 장치에서 두 열을 다른 열 위에 배치 하려는 경우 이전 table태그로 는 불가능합니다 . 이 작업을 수행하려면 CSS테이블 스타일 을 적용해야 합니다. 따라서 현재 CSS화면 크기에 반응 형 레이아웃을 원한다면 이 문제를 해결하는 것이 좋습니다 .

— ElChiniNet 2016 년

5

다른 열의 너비가 고정되어 있으면 모든 공통 브라우저에서 작동 하는 calcCSS 함수를 사용하는 방법은 어떻 습니까 ?

width: calc(100% - 20px) /* 20px being the first column's width */

이런 식으로 두 번째 행의 너비가 계산되고 (즉, 나머지 너비) 응답 적으로 적용됩니다.

— anit
소스

예를 들어 flexbox 이외의 다른 것을 사용하는 것이 가장 좋습니다 css-grid. 또한 position: fixed모든 것이 완벽한 선택을 가능하게합니다! 감사합니다!

— Bartekus

3

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
  </div>

</body>

</html>

스 니펫 확장

— 프라 모드 쿠마르
소스

왼쪽에 고정 된 항목, 오른쪽에 고정 된 항목 및 왼쪽의 공간을 모두 사용하는 하나의 메시지 줄이있는 상태 표시 줄과 같은 것을 원합니다. 이 답변으로 시작하여 플로트 후 메시지 div를 추가했습니다. height : 20px; 공백 : nowrap; 오버플로 : 숨겨진; text-overflow : clip

— englebart

3

CSS Grid Layout을 시도 할 수 있습니다 .

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

스 니펫 확장

— 정경
소스

2

flex-grow-필요한 경우 flex 아이템이 성장할 수있는 능력을 정의합니다. 비율로 사용되는 단위가없는 값을 허용합니다. 플렉스 컨테이너 내에서 사용할 수있는 공간의 양을 나타냅니다.

모든 항목의 flex-grow가 1로 설정되어 있으면 컨테이너의 나머지 공간이 모든 하위 항목에 균등하게 분배됩니다. 자식 중 하나의 값이 2이면 나머지 공간은 다른 공간보다 두 배의 공간을 차지합니다 (또는 최소한 시도합니다). 여기 더 참조

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

스 니펫 확장

— 스타니 슬라 프 오스타 펜코
소스

1

약간 다른 구현,

존재하지 않으면 두 개의 div 패널 (콘텐츠 + 추가)이 나란히 content panel확장됩니다 extra panel.

jsfiddle : http://jsfiddle.net/qLTMf/1722/

— 라오
소스

1

Pat-네 말이 맞아. 이것이이 솔루션이 "공룡"과 동시대를 모두 만족시키는 이유입니다. :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

스 니펫 확장

— 존 마노아
소스

2

CSS 클래스 .ip에 대한 HTML 참조가 없으며 IE7에서 작동하지 않습니다.

— Keith K

1

다음과 같은 클래스가 포함 된 W3의 CSS 라이브러리를 사용할 수 있습니다 rest.

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

스 니펫 확장

페이지에서 CSS 라이브러리를 연결하는 것을 잊지 마십시오 header.

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

공식 데모는 다음과 같습니다. W3 School Tryit Editor

— 마나
소스

대답의 나쁜 버전이 이미 주어진 그것을 만드는 : 같은 외모는 "숨겨진 오버 플로우"추가

— vpzomtrrfrt

0

이것이 당신이 기대하는 대답인지 확실하지 않지만 Tree의 너비를 'auto'로 설정하고 'View'의 너비를 100 %로 설정하지 않는 이유는 무엇입니까?

3

그것이 너무 넓기 때문에 두 번째 플로트를 첫 번째 플로트 아래에 놓을 것이기 때문입니다.

— cletus

0

사용 가능한 CSS 레이아웃 프레임 워크를 살펴보십시오. 나는 추천 간체 또는 약간 더 복잡한, 청사진 프레임 워크를.

Simpl ( simpl.css 파일 하나만 가져 오는 작업 )을 사용하는 경우 다음을 수행 할 수 있습니다.

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

, 50-50 레이아웃 또는

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

25-75를 위해.

그렇게 간단합니다.

두 열이 가변 너비입니까?

— Anurag Uniyal

0

Simpl.css의 플러그에 감사드립니다!

모든 열을 ColumnWrapper이렇게 포장해야합니다 .

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

Simpl.css 버전 1.0을 출시하려고합니다.

— 얽히고 설킨
소스

0

jQuery $ (document) .ready ()에서 호출하는 자바 스크립트 함수를 작성했습니다. 부모 div의 모든 자식을 구문 분석하고 가장 오른쪽 자식 만 업데이트합니다.

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

자바 스크립트

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

— bcr666
소스

0

flexbox를 사용하면 상당히 쉽습니다. 아래의 스 니펫을 참조하십시오. 흐름을 제어하고 전체 높이를 설정하기 위해 래퍼 컨테이너를 추가했습니다. 요소를 식별하기 위해 테두리가 추가되었습니다. div는 이제 필요에 따라 전체 높이까지 확장됩니다. 실제 시나리오에서는 flexbox에 공급 업체 접두사를 사용해야 아직 완벽하게 지원되지 않습니다.

flexbox를 사용하여 레이아웃을 이해하고 디자인 할 수있는 무료 도구를 개발했습니다. 여기에서 확인하십시오 : http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

스 니펫 확장

— 마리오 바스케스
소스

답변을 추가하기 전에 이전 답변을 모두 읽었습니까? 그것은 없다 ...

— Temani Afif

참고로, stretch기본값이므로 하위 요소 플렉스 컨테이너를 display:flex내부 요소에 쓸모 없게 만들 필요가 없기 때문에 추가 할 필요 가 없습니다.

— Temani Afif

나는 아무런 의견없이 왜 downvote인지 궁금합니다. 이 답변이 질문에 응답하지 않습니까? 왜? 다른 사람들을 돕고 자한다면 다음 답변 전에 두 번 생각할 것입니다.

— Mario Vázquez

1

공감 후 두 개의 의견을 받았습니다. 충분하지 않습니까?

— Temani Afif

테마리, 내 도구를 확인 했니? 유용하고 다른 사람들을 도울 수 있다고 생각하지 않습니까? 질문과 관련이 없다고 생각하십니까? 이 질문에 대한 답은 어디에 있습니까? 나는 그것을 볼 수 없습니다. 여기서 당신의 역할은 무엇입니까?

— 마리오 바스케스

-3

두 너비가 가변 길이 인 경우 일부 스크립팅 또는 서버 측에서 너비를 계산하지 않겠습니까?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

— 양서류
소스

3

서버는 클라이언트의 레이아웃 엔진이 어떻게 작동하는지 어떻게 알 수 있습니까?

— Kev

간단 함 : 브라우저의 90 %를 위해 개발하십시오.) IE 7+, FF3 + 및 Safari는 CSS 3을 지원합니다. 표준 IE6 <!-[if lte IE 6]> 요소도 포함 할 수 있습니다. 그건 그렇고, 브라우저가 style = "width : %"를 지원하지 않는 것은 무엇입니까 ??

— amischiefr

서버 측에서 어떻게 할 수 있는지 모르겠지만, 일부 javscript가 할 수는 있지만 CSS / html로 할 수없는 경우를 피하고 싶습니다.

— Anurag Uniyal

그것은 할 수 없습니다. 따라서 둘 다 동적으로하려면 스크립트 또는 서버 쪽에서 수행해야합니다.

— amischiefr

나머지 너비를 채우기 위해 div를 확장하십시오.

Flexbox 솔루션