인라인 블록 요소를 나머지 줄에 채우는 방법?

186

CSS 대신 테이블을 사용하는 대신 두 개의 인라인 블록 (또는 무엇이든) DIV 태그를 사용하면 가능합니까?

테이블 버전은 다음과 같습니다 (테두리가 추가되어 볼 수 있습니다).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

너비 가 고정 되지 않은 FIXED WIDTH 의 왼쪽 열과 줄의 나머지 공간 을 채우기 위해 확장되는 오른쪽 열이 생성됩니다 . 아주 간단하게 들립니까? 또한, "부동되지 않은"것이 없기 때문에, 부모 컨테이너의 높이는 내용물의 높이를 포함하도록 적절히 확장된다.

--BEGIN RANT--
고정 폭 사이드 컬럼을 가진 다중 열 레이아웃에 대한 "명확한 수정"및 "거룩한 성배"구현을 보았고, 복잡하고 복잡합니다. 요소의 순서를 반대로하거나, 너비 비율을 사용하거나, 부동 수, 음수 여백을 사용하며, "왼쪽", "오른쪽"및 "여백"속성 간의 관계는 복잡합니다. 또한 레이아웃은 하위 픽셀에 민감하므로 단일 픽셀의 테두리, 패딩 또는 여백을 추가해도 전체 레이아웃이 깨지고 전체 열 줄 바꿈이 다음 줄로 전송됩니다. 예를 들어, 반올림 오류는 각 요소의 너비를 25 %로 설정하여 한 줄에 4 개의 요소를 배치하는 것과 같이 간단한 작업을 시도하더라도 문제가됩니다.
-끝 RANT--

"inline-block"과 "white-space : nowrap;"을 사용해 보았지만 문제는 두 번째 요소가 줄 의 나머지 공간 을 채울 수 없다는 것 입니다. 너비를 "width : 100 %-(LeftColumWidth) px"와 같은 값으로 설정하면 경우에 따라 작동하지만 width 속성에서 계산을 수행하는 것은 실제로 지원되지 않습니다.

css layout fixed-width

— 트리 인 코
소스

1

나는 이것을 display: table-*작동시킬 구조체 로 바꾸는 것을 제외하고는 이것을 할 수있는 건전한 방법이 없다고 생각 하지만 실제로는 "더 의미 론적이지"않고 (끔찍한 div수프) IE6 호환성을 파괴합니다. <table>누군가가없이 작동하는 천재적인 간단한 아이디어를 내놓지 않으면 개인적으로을 고수 할 것입니다.

— Pekka

51

네. CSS 시대가 시작된 이래로이 모든 "피할 수없는 테이블"인수를 계속 사용하며 레이아웃에 테이블을 사용하는 경우 무능한 게으른 바보 같은 소리를냅니다. 10 년을 빨리 감아도 여전히 이상적인 파이프 꿈입니다. 사실, 사용자 인터페이스 및 양식과 같이 고정되지만 유연한 레이아웃을위한 흐름 레이아웃 의미론이 SUCK입니다. 진실은 똑똑한 사람들이 가능한 모든 CSS 솔루션을 다 사용하고 테이블을 사용하는 것보다 불완전하고 훨씬 더 복잡하다는 것을 깨달았 기 때문에 편리한 곳에서 테이블을 사용한다는 것입니다.

— Triynko

4

수레? 줄 끝 요소가 예기치 않게 줄 바꿈되지 않고 테두리와 여백이 레이아웃을 깨뜨리지 않는 작업 코드를 보여주세요. 그게 잘못이야 또한 자동 크기 조정 된 상위 컨테이너가 "확실한 수정"해킹없이 플로팅 요소를 포함하도록 올바르게 확장됩니까? 나는 그렇게 생각하지 않았다.

— Triynko

부모 컨테이너에 플로팅되지 않은 요소가 하나 이상 있다면 실제로 플로트를 지우는 것이 "해킹"이 아닙니다. CSS는 인쇄에 뿌리를두고 있습니다. css-tricks.com/containers-dont-clear-floats 를 참조 하여 자동 지우기 기능을 사용하지 않는 이유에 대해 자세히 알아 보십시오 .

— Chowlett

3

@ Triynko : 이것은 내가 이전에 만든 것입니다 : jsfiddle.net/thirtydot/qx32C- 나는 그것이 당신의 요점의 대부분에 맞다고 생각합니다. 내가 한 데모에 대한 당신의 비판을 듣고 나중에 고치려고 노력합니다.

— thirtydot

169

참조 : http://jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}

<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

스 니펫 확장

이유는 대체 않았다 margin-left: 100px과 overflow: hidden에 .right?

편집 : 위의 (죽은) 링크에 대한 두 개의 거울이 있습니다.

— 서른 점
소스

60

자신을 웹 개발자라고 부르면 해당 링크를 클릭해야합니다. 나는했고, 나는 마술 양탄자 타는 것에 관해 Jasmine처럼 느꼈다.

— Chris Shouts

2

@ChrisShouts, 아마도 이것을 설명하는 가장 좋은 방법 일 것입니다. 이 방법은 의미가 없지만 다시 말하지만 ... 명시 적으로 수행 할 수있는 무언가에 대한 훌륭한 해결 방법입니다.

— mjvotaw

14

오버플로 숨김은 해결책이 아닙니다. 올바른 컨테이너의 오버플로를 숨기고 싶지 않다고 가정하십시오. 이것은 오른쪽 컨테이너의 크기가 줄의 나머지 공간을 채우지 않습니다. 이것은 여전히 만족스러운 답변이 없기 때문에 여전히 답을 표시하지 않은 2 살짜리 질문의 예입니다.

— Triynko

3

Triynko : 'overflow : hidden'을 사용하더라도 일반적으로 아무것도 숨겨지지 않습니다 (적어도 텍스트가있는 경우). div 내부의 텍스트 / 요소는 div보다 큰 요소를 갖지 않는 한 div 안에 맞도록 배열됩니다.

— CpnCrunch

1

@RMorrisey : 아마도 일부 box-sizing: border-box에 필요할 것 div입니다. 설명하는 동작을 보여주는 데모를 제공하지 않았기 때문에 추측 할 수 있습니다. 존재가 말했다, 기반 솔루션은 일반적으로 더 낫다 . 이것은 매우 오래된 질문이지만 OP의 동작으로 인해이 질문의 테이블과 관련이없는 것을 피하려고한다고 생각합니다. display: table

— thirtydot

65

flexbox를 사용하는 최신 솔루션 :

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

스 니펫 확장

http://jsfiddle.net/m5Xz2/100/

— 파누 호르 스 말라 티
소스

4

플렉스 100 % 폭 표시 .. 기억 해

— dreamerkumar

10

flex를 사용할 때 flex: 1대신에 사용 하지 width: 100%않겠습니까?

— Itai Bar-Haim

새로운 사람들을 위해 인 flexbox : flex: 1대한 속기 flex-grow: 1. 조합 속성입니다 : flex: <grow> <shrink> <basis>.

— tanius

1

Flex는 IE <11에서 지원되지 않으며 11에서는 매우 버그가 있습니다.

— Eric Shields

1

@EricShields 이것은 Flexbox를 사용하는 사람을 막아서는 안됩니다. 요즘 우리는 flexbugs당신을 알고 있습니다.

— 신경 전달 물질

47

일반적인 최신 브라우저 (IE 8+)와 호환 가능 : http://jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}

 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

스 니펫 확장

— 서리가 내린 Z
소스

9

테이블 사용에 대한 주장은 표현 특성과 관련이 없습니다. 관리 할 수없는 마크 업, 스타일 / 문서 혼잡, 부적절한 의미와 관련이 있습니다. 이 인수 중 어느 것도에 적용되지 않습니다 display:table.

— Rich Remer

이것은 inline-block나머지 줄을 채우는 방법에 대한 답변이 아닙니다 .

— 신경 전달 물질

1

@TranslucentCloud 나는 내 대답이 질문 제목에 정확하게 대답하지는 않지만 질문 본문에 표시된 것처럼 div를 사용하여 사용 가능한 너비를 채우는 방법을 제공한다는 데 동의합니다.

— Frosty Z

1

나는이 솔루션을 많이 좋아합니다. 숨겨진 CSS 로직 (오버플로 숨김과 같은)에서 발생하는 이상한 스타일을 사용하지 않아도됩니다.

— Chaoste

4

유동 요소에 calc (100 %-100px)를 사용하고 두 요소 모두에 display : inline-block을 사용할 수 있습니다.

태그 사이에 공백이 없어야합니다. 그렇지 않으면 계산에서 해당 공간도 고려해야합니다.

.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}


<div class=“left”></div><div class=“right”></div>

빠른 예 : http://jsfiddle.net/dw689mt4/1/

— SuperIRis
소스

1

저는 flex-grow이 목표를 달성하기 위해 재산을 사용 했습니다. 사용자가 설정해야합니다 display: flex부모 컨테이너에 대한, 당신은 설정해야합니다 flex-grow: 1당신이 남은 공간, 아니면 그냥 채우려는 블록 flex: 1으로 tanius 코멘트에 언급.

— 블라디슬라프 코베 첸 코프
소스

0

overflow: hidden원하지 않기 때문에 사용할 수 없거나 overflow: hiddenCSS 해킹 / 해결 방법을 싫어하는 경우 JavaScript를 대신 사용할 수 있습니다. JavaScript이므로 제대로 작동하지 않을 수 있습니다.

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}

.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}

<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

스 니펫 확장

http://jsfiddle.net/ys2eogxm/

— 닉 매닝
소스

0

인라인 블록을 포기하면

.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

http://jsfiddle.net/RXrvZ/3731/

( CSS Float에서 : 텍스트를 왼쪽으로 이미지 넣기 )

— 팬키
소스