인라인 블록 요소를 나머지 줄에 채우는 방법?
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 속성에서 계산을 수행하는 것은 실제로 지원되지 않습니다.
참조 : 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?
편집 : 위의 (죽은) 링크에 대한 두 개의 거울이 있습니다.
- archive.is
- web.archive.org
- https://colinaarts-com.herokuapp.com/#making-room-for-floats/articles/the-magic-of-overflow-hidden
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/
Compatible with common modern browers (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>You can use calc (100% - 100px) on the fluid element, along with display:inline-block for both elements.
Be aware that there should not be any space between the tags, otherwise you will have to consider that space in your calc too.
.left{
display:inline-block;
width:100px;
}
.right{
display:inline-block;
width:calc(100% - 100px);
}
<div class=“left”></div><div class=“right”></div>
Quick example: http://jsfiddle.net/dw689mt4/1/
I've used flex-grow property to achieve this goal. You'll have to set display: flex for parent container, then you need to set flex-grow: 1 for the block you want to fill remaining space, or just flex: 1 as tanius mentioned in the comments.
If you can't use overflow: hidden (because you don't want overflow: hidden) or if you dislike CSS hacks/workarounds, you could use JavaScript instead. Note that it may not work as well because it's 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>When you give up the inline blocks
.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/
'Programing' 카테고리의 다른 글
| 사전 키로 사용자 정의 유형의 객체 (0) | 2020.05.23 |
|---|---|
| Eclipse Europa, Helios, Galileo의 차이점 (0) | 2020.05.23 |
| Transular 'true'및 Angular에서 'element'를 포함하는 경우는 언제입니까? (0) | 2020.05.23 |
| 그렇지 않은 경우 파이썬 == vs if! = (0) | 2020.05.23 |
| 모든 재귀를 반복으로 변환 할 수 있습니까? (0) | 2020.05.23 |