내 페이지의 왼쪽과 오른쪽에 각각 하나씩 2 개의 div가 있습니다 . 왼쪽의 너비는 고정되어 있으며 오른쪽의 나머지 공간을 채우고 싶습니다.
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>답변
이것은 당신이하려는 것을 성취하는 것 같습니다.
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>답변
Boushley의 대답에서 찾은 문제는 오른쪽 열이 왼쪽보다 길면 왼쪽을 감싸서 전체 공간을 채우는 것입니다. 이것은 내가 찾던 행동이 아닙니다. 많은 ‘솔루션’을 검색 한 후 세 개의 열 페이지를 만드는 방법에 대한 자습서 (현재 링크가 죽었습니다)를 발견했습니다.
저자는 세 가지 방법, 즉 하나의 고정 너비, 하나는 가변 열 세 개, 다른 하나는 고정 외부 열과 가변 너비 중간 세 가지를 제공합니다. 내가 찾은 다른 예보다 훨씬 우아하고 효과적입니다. CSS 레이아웃에 대한 이해가 크게 향상되었습니다.
기본적으로 위의 간단한 경우 첫 번째 열을 왼쪽으로 띄우고 고정 너비를 지정하십시오. 그런 다음 오른쪽 열에 첫 번째 열보다 약간 넓은 왼쪽 여백을 지정하십시오. 그게 다야. 끝난. Ala Boushley의 코드 :
다음은 Stack Snippets & jsFiddle 의 데모입니다.
#left {
float: left;
width: 180px;
}
#right {
margin-left: 180px;
}
/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}<div id="left"> left </div>
<div id="right"> right </div>Boushley의 예에서 왼쪽 열은 다른 열을 오른쪽으로 유지합니다. 왼쪽 열이 끝나 자마자 오른쪽 공간 전체가 다시 채워지기 시작합니다. 여기서 오른쪽 열은 단순히 페이지에 더 정렬되고 왼쪽 열은 큰 뚱뚱한 여백을 차지합니다. 흐름 상호 작용이 필요하지 않습니다.
답변
해결책은 디스플레이 속성에서 비롯됩니다.
기본적으로 두 div가 테이블 셀처럼 작동하도록해야합니다. 따라서을 사용하는 대신 두 div 모두 float:left를 사용해야 display:table-cell하고 동적 너비 div width:auto;도 설정해야합니다 . 두 div 모두 display:table속성이 있는 100 % 너비 컨테이너에 배치해야합니다 .
CSS는 다음과 같습니다.
.container {display:table;width:100%}
#search {
width: 160px;
height: 25px;
display:table-cell;
background-color: #FFF;
}
#navigation {
width: auto;
display:table-cell;
/*background-color: url('../images/transparent.png') ;*/
background-color: #A53030;
}
*html #navigation {float:left;}그리고 HTML :
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>중요 : Internet Explorer의 경우 동적 너비 div에 float 속성을 지정해야합니다. 그렇지 않으면 공간이 채워지지 않습니다.
이것이 귀하의 문제를 해결하기를 바랍니다. 원하는 경우 내 블로그 에서 내가 작성한 전체 기사를 읽을 수 있습니다 .
답변
요즘에는이 flexbox방법을 사용해야합니다 (브라우저 접두사가있는 모든 브라우저에 적용될 수 있음).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}자세한 정보 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
답변
이것은 다소 인기있는 질문이므로 BFC를 사용하여 멋진 솔루션을 공유하는 경향이 있습니다.
다음의 코드 펜 샘플은 여기 입니다.
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}이 경우 overflow: auto컨텍스트 동작을 트리거하고 올바른 요소 를 사용 가능한 나머지 너비 로만 확장하고 자연스럽게 전체 너비로.left 사라지면 . 많은 UI 레이아웃에 유용하고 깔끔한 트릭이지만 처음에는 “왜 작동하는지”를 이해하기 어려울 수 있습니다.
답변
이전 버전의 특정 브라우저 (IE 10 8 이하) 와 호환되지 않아도되는 경우 calc()CSS 기능을 사용할 수 있습니다 .
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}답변
@Boushley의 대답이 가장 비슷했지만 지적되지 않은 문제가 하나 있습니다. 권리 사업부는 브라우저의 전체 폭을한다; 내용은 예상 너비를 갖습니다. 이 문제를 더 잘 보려면 :
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>내용이 올바른 위치에 있지만 (Firefox에서) 너비가 올바르지 않습니다. 자식 요소가 너비를 상속하기 시작할 때 (예 :width: 100% ) 브라우저의 너비와 동일한 너비가 제공되어 페이지 오른쪽에서 오버플로되고 가로 스크롤 막대 (Firefox에서)가 생성되거나 플로팅되지 않고 아래로 밀려납니다 ( 크롬에서).
다음 을 추가하여 쉽게 해결할 수 있습니다overflow: hidden오른쪽 열에 . 이것은 내용과 div 모두에 대한 올바른 너비를 제공합니다. 또한 테이블은 올바른 너비를 받고 사용 가능한 나머지 너비를 채 웁니다.
위의 다른 솔루션 중 일부를 시도했지만 특정 사례에서 완벽하게 작동하지 않았으며 문제를 해결하기 위해 너무 복잡했습니다. 이것은 작동하며 간단합니다.
문제 나 우려가있는 경우 자유롭게 제기하십시오.