나머지 너비를 채우도록 div 확장
저는 두 개의 열로 된 div 레이아웃을 원합니다. 각각의 열은 가변 너비를 가질 수 있습니다. 예를 들어,
div {
float: left;
}
.second {
background: #ccc;
}<div>Tree</div>
<div class="second">View</div>나는 'tree' div가 필요한 공간을 채운 후 'view' div가 사용 가능한 전체 너비로 확장되기를 원합니다.
현재 저의 'view' div는 포함된 내용에 맞게 크기가 조정됩니다. 두 div가 전체 높이를 차지하는 것도 좋을 것입니다.
중복 거부권 없음:
- float:left가 설정되어 있으면 div를 최대 너비로 확장합니다. 왼쪽 너비가 고정되어 있기 때문입니다.
- div 도움말 - 왼쪽으로 정렬된 두 개의 열이 모두 필요하므로 나머지 너비를 div로 맞춥니다.
이것에 대한 해결책은 사실 매우 쉽지만, 전혀 명백하지 않습니다.특정 방식으로 플로트와 상호 작용하는 "블록 포맷 컨텍스트"(BFC)라는 것을 트리거해야 합니다.
디브를 하고 두번 디가져를서가브제플, 를고하거주세요, 로▁it주▁just,▁take요세▁div▁second,그것,을▁that▁and▁the▁give▁float▁remove.overflow:hidden대신.표시되지 않는 오버플로 값은 설정된 블록을 BFC로 만듭니다.BFC는 하위 플로트가 빠져나가는 것을 허용하지 않으며 형제/조상 플로트가 침입하는 것도 허용하지 않습니다.여기서의 순수한 효과는 부유된 디브가 제 역할을 하고, 두 번째 디브는 부유된 디브가 차지하는 것을 제외한 모든 사용 가능한 폭을 차지하는 일반 블록이 된다는 것입니다.
IE6 및 7에서 hasLayout을 트리거해야 하지만 현재 모든 브라우저에서 작동합니다.기억이 안 나요.
데모:
div {
float: left;
}
.second {
background: #ccc;
float: none;
overflow: hidden;
}<div>Tree</div>
<div class="second">View</div>플렉스 박스(디스플레이: 플렉스)의 마법을 발견했습니다.사용해 보십시오.
<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>
플렉스 박스는 제가 15년 동안 CSS가 갖고 싶어했던 제어력을 줍니다.드디어 도착했습니다!더 많은 정보: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS 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>이것은 테이블과 관련하여 사소한 것이고 CSS와 관련하여 어려운 것의 좋은 예가 될 것입니다.
두 열 모두 너비가 고정되어 있으면 이 작업이 쉬워집니다.
열 중 하나가 너비가 고정된 경우 이는 약간 더 어렵지만 완전히 수행할 수 있습니다.
두 열 모두 너비가 가변인 IMHO에서는 두 열 표를 사용하기만 하면 됩니다.
사용하다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 및 emwork fine)으로 명시적으로 정의하거나 자체적으로 명시적으로 정의된 항목의 백분율로 명시적으로 정의해야 한다는 것입니다.
이 솔루션을 확인하십시오.
.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>여기, 이게 도움이 될지도...
<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>다른 열의 너비가 고정되어 있다면 모든 공통 브라우저에서 작동하는 CSS 기능을 사용하는 것은 어떻습니까?
width: calc(100% - 20px) /* 20px being the first column's width */
이렇게 하면 두 번째 행의 너비(즉, 나머지 너비)가 계산되고 그에 따라 적용됩니다.
나는 왜 사람들이 오래된 것을 사용하기 쉬운 단순한 기둥 배치를 위한 순수-CSS 솔루션을 찾기 위해 그렇게 열심히 노력하는지 이해할 수 없습니다.TABLE꼬리표를 달다
모든 브라우저에 테이블 레이아웃 논리가 있습니다...공룡이라고 불러주세요. 하지만 당신을 돕게 해주세요.
<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>브라우저 간 호환성 측면에서도 훨씬 덜 위험합니다.
<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>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>flex-grow - 필요한 경우 Flex 항목을 확장할 수 있는 기능을 정의합니다.비율 역할을 하는 단위가 없는 값을 허용합니다.항목이 플렉스 컨테이너 내에서 사용 가능한 공간의 양을 지정합니다.
모든 항목의 유연한 성장이 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>약간 다른 구현,
패널 2개의 div 패널(content+extracontent panel다음과 같은 경우 확장됩니다.extra panel없습니다.
jsfiddle: http://jsfiddle.net/qLTMf/1722/
W3의 CSS 라이브러리를 사용하면 다음과 같은 클래스를 수행할 수 있습니다.
<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에서 CSS header:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
여기 공식 데모가 있습니다: W3 School Tryit Editor.
이것이 당신이 기대하는 답인지는 모르겠지만, 트리의 너비를 '자동'으로, '보기'의 너비를 100%로 설정하는 것은 어떨까요?
jQuery $(문서)에서 호출하는 자바스크립트 함수를 작성했습니다.준비가 된이렇게 하면 상위 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"));
}
});
});
}
Flexbox를 사용하면 이 작업이 상당히 쉽습니다.아래의 토막글을 참조하십시오.흐름을 제어하고 글로벌 높이를 설정하기 위해 래퍼 컨테이너를 추가했습니다.요소를 식별하기 위해 테두리도 추가되었습니다.이제 필요에 따라 div도 최대 높이로 확장됩니다.벤더 접두사는 아직 완전히 지원되지 않으므로 실제 시나리오에서는 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>.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>.container{
display: flex;
align-items: stretch;
}
.resize_overflow {
position: relative;
width: 0;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
/* text-overflow: ellipsis; When the end of the line dissolves, the ellipsis loses */
}
.second_fix {
float: right;
/* or:
display: flex;
align-self: end;*/
}
/* Dissolve the end of the line at the right edge */
.resize_overflow::after {
content: ""; /* Empty content */
position: absolute; /* Position relative to parent */
right: 0; /* Element position */
top: 0; /* Element position */
width: 40px; /* Gradient width */
height: 100%; /* Parent Height */
background: -moz-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -o-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -ms-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: linear-gradient(to right, rgba(255,255,255, 0.2), #ff 100%);
}<div class="container">
<div class="resize_overflow">Tree</div>
<div class="second_fix">View</div>
</div>사용 가능한 CSS 레이아웃 프레임워크를 살펴봅니다.조금 더 복잡한 Blueprint 프레임워크인 Simplor를 추천합니다.
Simple(simple.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의 경우.
그렇게 간단하다.
두 폭이 모두 가변 길이라면 스크립팅이나 서버 측면을 이용해 폭을 계산해보는 것은 어떨까요?
<div style="width: <=% getTreeWidth() %>">Tree</div>
<div style="width: <=% getViewWidth() %>">View</div>
언급URL : https://stackoverflow.com/questions/1260122/expand-a-div-to-fill-the-remaining-width
'programing' 카테고리의 다른 글
| Xcode 7.2 일치하는 프로비저닝 프로파일을 찾을 수 없음 (0) | 2023.05.20 |
|---|---|
| 종료 코드 255에서 ibtool이 실패하는 이유는 무엇입니까? (0) | 2023.05.20 |
| 로컬 레포를 추가하고 원격 레포로 처리하는 방법 (0) | 2023.05.15 |
| Angular Karma Jasmine 오류:잘못된 상태:지시문 요약을 로드할 수 없습니다. (0) | 2023.05.15 |
| 대소문자를 구분하지 않는 문자열을 LINQ-SQL로 비교 (0) | 2023.05.15 |