인라인 블록 요소가 라인의 나머지 부분을 채우도록 하는 방법은?
테이블을 사용하는 대신 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>
고정 너비(백분율 너비가 아님)를 가진 왼쪽 열과 선의 나머지 공백을 채우기 위해 확장되는 오른쪽 열을 생성합니다.아주 간단한 것 같네요, 그렇죠?또한 아무것도 "떠있는" 것이 없기 때문에, 부모 컨테이너의 높이는 콘텐츠의 높이를 포함하도록 적절하게 확장됩니다.
­호통을 시작하는 독자
측면 기둥이 고정된 다중 기둥 배치에 대한 "명확한 수정"과 "성배" 구현을 본 적이 있는데, 그것들은 형편없고 복잡합니다.요소의 순서를 반대로 하거나, 백분율 폭을 사용하거나, 플로트, 음의 여백을 사용하며, "좌측", "우측" 및 "마진" 속성 간의 관계는 복잡합니다.또한 레이아웃은 하위 픽셀에 민감하므로 테두리, 패딩 또는 여백의 단일 픽셀을 추가해도 전체 레이아웃이 깨지고 전체 열 랩핑이 다음 줄로 전송됩니다.예를 들어, 한 줄에 4개의 요소를 넣고 각 요소의 폭을 25%로 설정하는 등 간단한 작업을 하려고 해도 반올림 오류가 문제가 됩니다.
­ 종료--
"inline-block"과 "white-space:nowrap;"을 사용해 보았지만 문제는 두 번째 요소가 라인의 남은 공간을 채울 수 없다는 것입니다.너비를 "width:100%-(LeftColumWidth)px"와 같이 설정하면 경우에 따라 작동하지만 너비 속성에서 계산을 수행하는 것은 실제로 지원되지 않습니다.
참조: 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?
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/
일반적인 최신 브라우저와 호환(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>두 요소 모두에서 display:inline-block과 함께 Calc(100% - 100px)를 유체 요소에 사용할 수 있습니다.
태그 사이에 공간이 없어야 합니다. 그렇지 않으면 계산에서도 해당 공간을 고려해야 합니다.
.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/
사용했습니다.flex-grow이 목적을 달성하기 위한 재산.설정을 하셔야 할 것입니다.display: flex다를 .flex-grow: 1또는 tflex: 1댓글에 타니우스가 언급한 것처럼.
수 overflow: hidden 않기 에)overflow: hidden 방법을 할 수 또는 CSS 해킹/해결 방법을 싫어한다면 대신 자바스크립트를 사용할 수 있습니다.자바스크립트이기 때문에 잘 작동하지 않을 수도 있다는 점에 유의하시기 바랍니다.
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>인라인 블록을 포기할 때
.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에서: 텍스트 왼쪽에 이미지 띄우기)
만약 저처럼 왼쪽 상자가 랩을 해도 줄 끝까지 확장되는 것을 원한다면 자바스크립트가 유일한 옵션입니다.
계산 기능을 사용하여 이 문제를 정확하게 해결하고자 합니다.
Array.from(document.querySelectorAll(".right")).forEach((el) => {
el.style.width = `calc(100% - ${el.offsetLeft + 1}px)`;
});.container {
outline: 1px solid black;
}
.left {
outline: 1px solid red;
}
.right {
outline: 1px solid green;
}<div class="container">
<span class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique aliquet quam, at commodo lorem fringilla quis.</span>
<input class="right" type="text" />
</div>그리드 레이아웃 및 분수 단위를 사용한 솔루션(fr):
/* For debugging and visibility */
html, body {
border: 2px solid navy;
}
.grid-layout {
border: thick solid sandybrown;
background-color: gray;
}
.grid-layout div:nth-child(odd) {
border: 2px solid brown;
background-color: azure;
}
.grid-layout div:nth-child(even) {
border: 2px solid red;
background-color: lightyellow;
}
/* Grid layout.
* Horizontal and vertical gaps.
* two columns, fixed and responsive.
* Note no containing div per line.
*/
.grid-layout {
display: grid;
gap: 4px 2px ;
grid-template-columns: 100px 1fr;
}<p>How to make an element fill the remainder of the line?</p>
<p>Note no encompassing div per line.</p>
<div class="grid-layout">
<div>Lorem ipsum line 1</div>
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</div>
<div>Lorem ipsum line 2</div>
<div>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</div>
</div>포괄적인 디브(div)를 사용하는 솔루션:
.lineContainer {
display: grid;
gap: 2px 4px;
grid-template-columns: 100px 1fr;
}<p>Display grid per line.</p>
<div class="lineContainer">
<div style="border:1px solid black; ">
Lorem ipsum …
</div>
<div style="border:1px solid black; ">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</div>
</div>언급URL : https://stackoverflow.com/questions/5540485/how-to-make-an-inline-block-element-fill-the-remainder-of-the-line
'programing' 카테고리의 다른 글
| preg_replace를 사용하여 첫 번째 매치만 바꿉니다. (0) | 2023.10.16 |
|---|---|
| constchar* 변수의 값을 변경할 수 있는 이유는 무엇입니까? (0) | 2023.10.16 |
| 워드프레스 관리 영역에서 메뉴 항목 레이블을 변경하시겠습니까? (0) | 2023.10.16 |
| pphmyadmin 결과에서 예상 행 수가 매우 다른 이유는 무엇입니까? (0) | 2023.10.16 |
| PowerShell에 터미네이터가 없습니다. " (0) | 2023.10.16 |