div를 나머지 수평 공간으로 채우는 방법은 무엇입니까?
내 페이지의 왼쪽과 오른쪽에 각각 하나씩 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 모두에 대한 올바른 너비를 제공합니다. 또한 테이블은 올바른 너비를 받고 사용 가능한 나머지 너비를 채 웁니다.
위의 다른 솔루션 중 일부를 시도했지만 특정 사례에서 완벽하게 작동하지 않았으며 문제를 해결하기 위해 너무 복잡했습니다. 이것은 작동하며 간단합니다.
문제 나 우려가있는 경우 자유롭게 제기하십시오.
다음은 허용 된 솔루션에 대한 약간의 수정으로, 오른쪽 열이 왼쪽 열 아래로 떨어지는 것을 방지합니다. 누군가 모르는 까다로운 솔루션으로 대체 width: 100%;되었습니다 overflow: hidden;.
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
http://jsfiddle.net/MHeqG/2600/
[edit] 또한 세 개의 열 레이아웃에 대한 예제를 확인하십시오. http://jsfiddle.net/MHeqG/3148/
사용하다 display:flex
<div style="width:500px; display:flex">
<div style="width:150px; height:30px; background:red">fixed width</div>
<div style="width:100%; height:30px; background:green">remaining</div>
</div>
Boushley의 대답은 이것을 플로트를 사용하여 정렬하는 가장 좋은 방법 인 것 같습니다. 그러나 문제가없는 것은 아닙니다. 확장 요소 내에 중첩 된 부동은 사용할 수 없습니다. 페이지가 깨집니다.
확장 요소와 관련하여 기본적으로 표시된 방법은 실제로 "가짜"입니다. 실제로 부동하지는 않으며 여백을 사용하여 고정 너비 부동 요소와 함께 재생됩니다.
문제는 정확히 다음과 같습니다. 확장 요소가 플로팅되지 않습니다. 확장 요소 내에 중첩 된 부동을 시도하면 "중첩 된"부동 항목은 실제로 중첩되지 않습니다. clear: both;"중첩 된"플로팅 된 항목 아래에 a 를 붙이려 고하면 최상위 플로트도 삭제됩니다.
그런 다음 Boushley의 솔루션을 사용하려면 다음과 같은 div를 추가해야합니다. .fakeFloat {height : 100 %; 폭 : 100 %; 왼쪽으로 뜨다; } 확장 된 div 내에 직접 배치하십시오. 확장 된 div의 모든 내용은이 fakeFloat 요소 내에 있어야합니다.
따라서이 특정한 경우에는 테이블을 사용하는 것이 좋습니다. 플로팅 요소는 실제로 원하는 확장을 수행하도록 설계되지 않았지만 테이블을 사용하는 솔루션은 간단합니다. 일반적으로 부동은 표가 아닌 레이아웃에 더 적합하다는 주장이 있습니다. 그러나 어쨌든 부동을 사용하지 않고, 가짜입니다-그리고 이러한 특정 사례에 대한 스타일 인수의 목적을 무너 뜨립니다. 나의 겸손한 의견.
나는 왼쪽의 액체에 대해 위의 해결책을 시도했지만 고정 된 권리는 있지만 그중 하나는 효과가 없었습니다 (질문은 반대의 문제이지만 이것이 관련이 있다고 생각합니다). 작동 한 내용은 다음과 같습니다.
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}
.right {float:right; width:150px;}
<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
비슷한 문제가 있었고 여기에서 해결책을 찾았습니다 : https : //.com/a/16909141/3934886
솔루션은 고정 센터 div 및 액체 측면 컬럼입니다.
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
왼쪽 고정 열을 원하면 수식을 적절히 변경하십시오.
두 항목 사이의 flexbox에 남은 공간을 채우려 고하면 분리하려는 2 사이의 빈 div에 다음 클래스를 추가하십시오.
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Grid CSS 속성을 사용할 수 있습니다. 가장 명확하고 깨끗하며 직관적 인 방식으로 상자를 구성합니다.
#container{
display: grid;
grid-template-columns: 100px auto;
color:white;
}
#fixed{
background: red;
grid-column: 1;
}
#remaining{
background: green;
grid-column: 2;
}<div id="container">
<div id="fixed">Fixed</div>
<div id="remaining">Remaining</div>
</div>나는 아무도 position: absolute함께 사용하지 궁금position: relative
따라서 다른 해결책은 다음과 같습니다.
HTML
<header>
<div id="left"><input type="text"></div>
<div id="right">Menu1 Menu2 Menu3</div>
</header>
CSS
header { position: relative; }
#left {
width: 160px;
height: 25px;
}
#right {
position: absolute;
top: 0px;
left: 160px;
right: 0px;
height: 25px;
}
/ * * CSS * /
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
/ * * html * /
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
이것에 대한 매우 간단한 해결책이 있습니다! // HTML
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
// CSS
#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}
링크 : http://jsfiddle.net/MHeqG/
비슷한 문제가 있었고 다음과 같이 잘 작동했습니다.
CSS :
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML :
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
이 방법은 윈도우가 축소 될 때 랩핑되지 않지만 '콘텐츠'영역을 자동으로 확장합니다. 사이트 메뉴의 고정 너비를 유지합니다 (왼쪽).
콘텐츠 상자 및 왼쪽 세로 상자 (사이트 메뉴) 자동 확장 데모 :
https://jsfiddle.net/tidan/332a6qte/
오른쪽의 위치 relative, 제거 width및 float속성을 추가 한 다음 값으로 추가 left및 right속성을 시도하십시오 0.
또한 위치를 유지하기 위해 margin left왼쪽 요소의 너비 (간격이 필요한 경우 + 픽셀 )를 기준으로 값을 사용하여 규칙을 추가 할 수 있습니다 .
이 예제는 저에게 효과적입니다.
#search {
width: 160px;
height: 25px;
float: left;
background-color: #FFF;
}
#navigation {
display: block;
position: relative;
left: 0;
right: 0;
margin: 0 0 0 166px;
background-color: #A53030;
}
.container {
width:100%;
display:table;
vertical-align:middle;
}
.left {
width:100%;
display:table-cell;
text-align:center;
}
.right {
width:40px;
height:40px;
display:table-cell;
float:right;
}<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div이 시도. 그것은 나를 위해 일했다.
나는이 문제를 이틀 동안 연구 해 왔으며 응답 고정 너비를 왼쪽으로 만들고 왼쪽을 감싸지 않고 오른쪽을 화면의 나머지 부분을 채우려 고하는 다른 사람에게 도움이되는 솔루션을 가지고 있습니다. 내가 생각하는 것은 브라우저뿐만 아니라 모바일 장치에서도 페이지를 반응 적으로 만드는 것입니다.
여기 코드가 있습니다
// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps. Without this delay the right div may go off screen when browser is refreshed
setTimeout(function(){
fixRightSideWidth();
$('.right_content_container').show(600);
}, 50);
// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
fixRightSideWidth();
});
function fixRightSideWidth(){
$blockWrap = 300; // Point at which you allow the right div to drop below the top div
$normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
$('.right_content_container').width( $normalRightResize );
$('.right_content_container').css("padding-left","0px");
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
else{
if( $('.right_content_container').width() > 300 ){
$('.right_content_container').width(300);
}
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
if( $thePageRefreshed == true ){
$thePageRefreshed = false;
}
}/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
min-width: 310px;
background: #333;
min-height:100vh;
}
body{
background: #333;
background-color: #333;
color: white;
min-height:100vh;
}
.top_title{
background-color: blue;
text-align: center;
}
.bottom_content{
border: 0px;
height: 100%;
}
.left_right_container * {
position: relative;
margin: 0px;
padding: 0px;
background: #333 !important;
background-color: #333 !important;
display:inline-block;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
font-size: 14px;
font-weight: 400;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
border-radius: 0;
box-sizing: content-box;
transition: none;
}
.left_navigator_item{
display:inline-block;
margin-right: 5px;
margin-bottom: 0px !important;
width: 100%;
min-height: 20px !important;
text-align:center !important;
margin: 0px;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: top;
}
.left_navigator_items {
float: left;
width: 150px;
}
.right_content_container{
float: right;
overflow: visible!important;
width:95%; /* width don't matter jqoery overwrites on refresh */
display:none;
right:0px;
}
.span_text{
background: #eee !important;
background-color: #eee !important;
color: black !important;
padding: 5px;
margin: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
<div class="left_right_container">
<div class="left_navigator_items">
<div class="left_navigator_item">Dashboard</div>
<div class="left_navigator_item">Calendar</div>
<div class="left_navigator_item">Calendar Validator</div>
<div class="left_navigator_item">Bulletin Board Slide Editor</div>
<div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
<div class="left_navigator_item">TV Guide</div>
</div>
<div class="right_content_container">
<div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.
Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.
Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.
Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.
In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
</div>
</div>
</div>여기 나와 같이 당신을 위해 일할 수있는 내 바이올린이 있습니다. https://jsfiddle.net/Larry_Robertson/62LLjapm/
html 테이블 요소는 기본적으로 이것을 설정합니다 ... 테이블 너비를 정의하면 열이 항상 전체 테이블 너비에 걸쳐 있습니다. 나머지는 상상력에 관한 것입니다
품목과 용기에 대한 규칙;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
공백 사용 : nowrap; 비파괴에 대한 마지막 항목의 텍스트.
품목 X % | 품목 Y % | 아이템 Z %
총 길이는 항상 100 %입니다!
만약
Item X=50%
Item Y=10%
Item z=20%
그때
항목 X = 70 %
항목 X가 지배적입니다 (첫 번째 항목이 테이블 CSS 레이아웃에서 지배적입니다)!
max-content를 시도하십시오 . 컨테이너에 div를 확산시키기위한 div 내부의 속성
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
가장 간단한 해결책은 왼쪽 div 너비를 100 %-오른쪽 div의 너비와 동일하게 만드는 것입니다.
<div id="cont">
<div id="search">
Big Logo Text
</div>
<div id="navigation">
<ul id="navbar">
<li><a href="#1">NavLink1</a></li>
<li><a href="#2">NavLink2</a></li>
<li><a href="#3">NavLink3</a></li>
<li><a href="#4">NavLink4</a></li>
<li><a href="#5">NavLink5</a></li>
</ul>
</div>
</div>
#cont{
width: 100%;
height: auto;
text-align: center;
}
#search {
float: left;
width: 160px;
height: 90px;
background-color: #00FF00;
line-height: 80px;
font-size: 1.4rem;
font-weight: 600;
}
#navigation {
float: right;
width: calc(100% - 160px);
height: 90px;
background-color: #A53030;
}
#navbar{
display: flex;
height: 30px;
width: 100%;
padding: 0%;
list-style-type: none;
flex-flow: row wrap;
flex: 0 1 auto;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
#navbar a{
outline: 0;
text-decoration: none;
}
https://codepen.io/tamjk/pen/dybqKBN
일부 jqueryUI 컨트롤 을 레이아웃하려고 할 때 동일한 문제가 발생했습니다 . 일반적인 철학은 이제 " DIV대신 사용 TABLE"이지만, 필자의 경우에는 TABLE을 사용하는 것이 훨씬 더 효과적이라는 것을 알았습니다. 특히 두 요소 (예 : 수직 중심, 수평 중심 등) 내에서 직선 정렬이 필요한 경우 TABLE에서 사용 가능한 옵션을 통해 간단하고 직관적 인 제어가 가능합니다.
내 해결책은 다음과 같습니다.
<html>
<head>
<title>Sample solution for fixed left, variable right layout</title>
<style type="text/css">
#controls {
width: 100%;
}
#RightSide {
background-color:green;
}
</style>
</head>
<body>
<div id="controls">
<table border="0" cellspacing="2" cellpadding="0">
<TR>
<TD>
<button>
FixedWidth
</button>
</TD>
<TD width="99%" ALIGN="CENTER">
<div id="RightSide">Right</div>
</TD>
</TR>
</table>
</div>
</body>
</html>
CSS가 처음입니다. 그러나 인라인 블록을 사용 하여이 문제를 해결했습니다. 이것을 확인하십시오 : http://learnlayout.com/inline-block.html
참고 URL : https://stackoverflow.com/questions/1032914/how-to-make-a-div-fill-a-remaining-horizontal-space
'Programing' 카테고리의 다른 글
| isset ()과 array_key_exists ()의 차이점은 무엇입니까? (0) | 2020.02.23 |
|---|---|
| @Before, @BeforeClass, @BeforeEach 및 @BeforeAll의 차이점 (0) | 2020.02.23 |
| 스택 추적을 잃지 않고 Java에서 예외를 다시 발생 (0) | 2020.02.23 |
| 컴퓨터 과학에서 NP-complete 란 무엇입니까? (0) | 2020.02.22 |
| CSS를 통해 PNG 이미지의 색상을 변경 하시겠습니까? (0) | 2020.02.22 |