어떻게 하면 디브가 남은 수평 공간을 채우게 할 수 있습니까?
저는 2개의 디브를 가지고 있습니다. 하나는 제 페이지의 왼쪽에 있고 하나는 오른쪽에 있습니다.왼쪽에 있는 것은 너비가 정해져 있고, 오른쪽에 있는 것이 남은 공간을 채워주길 바랍니다.
#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>제가 부슐리의 답변에서 발견한 문제는 오른쪽 열이 왼쪽 열보다 길면 왼쪽 열을 감싸고 전체 공간을 다시 채우는 것입니다.이것은 제가 찾던 행동이 아닙니다.많은 '솔루션'을 검색한 결과, 3개의 열 페이지를 만드는 방법에 대한 튜토리얼(현재 링크가 비활성화됨)을 발견했습니다.
저자는 세 가지 방법을 제안합니다. 하나는 고정 너비, 하나는 가변 열이 세 개 있는 방법, 다른 하나는 고정 외부 열이 있고 다른 하나는 중간 너비입니다.제가 찾은 다른 예들보다 훨씬 더 우아하고 효과적입니다.CSS 레이아웃에 대한 이해가 상당히 향상되었습니다.
기본적으로 위의 간단한 경우 첫 번째 열을 왼쪽으로 띄우고 고정 너비를 지정합니다.그런 다음 오른쪽 열에 첫 번째 열보다 약간 넓은 왼쪽 여백을 지정합니다.바로 그겁니다.알라 부쉴리의 암호:
스택 스니펫 & 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의 예에서는 왼쪽 열이 오른쪽의 다른 열을 유지합니다.왼쪽 열이 끝나자마자 오른쪽 열이 전체 공간을 다시 채우기 시작합니다.여기서 오른쪽 열은 페이지에 더 정렬되고 왼쪽 열은 페이지의 큰 지방 여백을 차지합니다.흐름 상호 작용이 필요하지 않습니다.
요즘에는, 당신은 그것을 사용해야 합니다.flexboxmethod(브라우저 접두사가 있는 모든 브라우저에 적용 가능).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
더 많은 정보: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
솔루션은 디스플레이 속성에서 제공됩니다.
기본적으로 당신은 두 개의 div가 테이블 세포처럼 작용하도록 만들어야 합니다.그래서 사용하는 대신float:left해합니다야용사를합을 사용해야 할 것입니다.display:table-cell div 두모서에, 고동너비 div설합니다정야해대해두를 .width:auto;또한. 두 div는 100% 너비의 용기에 다음과 같이 배치되어야 합니다.display:table소유물.
다음은 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에 부동 속성을 지정해야 합니다. 그렇지 않으면 공간이 채워지지 않습니다.
저는 이것이 당신의 문제를 해결하기를 바랍니다.당신이 원한다면, 당신은 제 블로그에서 제가 이것에 대해 쓴 전체 기사를 읽을 수 있습니다.
이것은 꽤 인기 있는 질문이기 때문에, 저는 BFC를 사용하여 멋진 솔루션을 공유하고 싶습니다.
다음의 샘플을 여기에 코드펜으로 작성합니다.
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
이경에는우,,overflow: auto컨텍스트 동작을 트리거하고 오른쪽 요소를 사용 가능한 나머지 너비로만 확장하고 다음과 같은 경우에는 자연스럽게 전체 너비로 확장합니다..left레이아웃에 에는 "작동하는지" 수 .많은 UI 레이아웃에 매우 유용하고 깔끔한 트릭이지만, 처음에는 "왜 작동하는지" 이해하기 어려울 수 있습니다.
이것은 당신이 원하는 것을 성취하는 것처럼 보입니다.
#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>특정 브라우저의 이전 버전(예: IE 108 이하)과의 호환성이 필요하지 않은 경우calc()CSS 함
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
@부슐리의 대답이 가장 가까웠지만, 한 가지 지적되지 않은 문제가 있습니다.오른쪽 div는 브라우저의 전체 너비를 차지하고 내용은 예상 너비를 차지합니다.이 문제를 더 잘 확인하려면:
<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%막대를 (파이어폭스에서) 페이지 오른쪽에서 오버플로하여 수평 스크롤 막대를 만들거나(파이어폭스에서) 뜨지 않고 아래로 밀리는(크롬에서) 브라우저의 너비와 동일한 너비가 제공됩니다.
다음을 추가하여 이 문제를 쉽게 해결할 수 있습니다.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/
두 항목 사이의 플렉스 상자에 남아 있는 공간을 채우려는 경우, 분리할 두 항목 사이의 빈 div에 다음 클래스를 추가합니다.
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
사용하다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>
부슐리의 답변은 플로트를 사용하여 이를 정리하기 위한 가장 좋은 방법인 것 같습니다.하지만, 문제가 없는 것은 아닙니다.확장된 요소 내에 중첩된 부동은 사용할 수 없으며 페이지가 중단됩니다.
표시된 방법은 확장 요소와 관련하여 기본적으로 "가짜"입니다. 실제로 떠 있는 것이 아니라 여백을 사용하여 고정된 너비의 떠 있는 요소와 함께 노는 것입니다.
그렇다면 문제는 바로 그것입니다. 팽창하는 요소가 떠다니지 않는다는 것입니다. 요소된 부동 항목이 . 즉, "된" 부동 항목을 하면 "된" 부동 항목은 실제로 중첩되지 않습니다clear: both;당신의 "슬라이드" 플로팅 아이템 아래에서, 당신은 최상위 플로트도 클리어하게 될 것입니다.
그런 다음, Bushley의 솔루션을 사용하려면 .fakeFloat {높이: 100%; 너비: 100%; float: left; }와 같은 div를 배치하고 이를 확장된 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://stackoverflow.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;
}
왼쪽 고정 열을 원하는 경우 공식을 적절히 변경하면 됩니다.
그리드 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>동일한 솔루션이 필요하지만 왼쪽 div의 길이가 고정되지 않은 경우:
왼쪽 div가 필요한 공간을 모두 차지하기를 원한다면 고정 크기 180px를 제거할 수 있습니다.아래의 CSS 참조:
#left {
float: left;
background-color: red;
}
#right {
background-color: yellow;
flex-grow: 1
}
JSFidle: jsfiddle-div-space에서 확인하십시오.
아무도 사용하지 않은 것이 궁금합니다.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의 0value.value.value.
또한 추가할 수 있습니다.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/
품목 및 용기에 대한 규칙
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
흰색 공백을 사용합니다. 마지막 항목의 비구조적인 텍스트는 다음과 같습니다.
항목 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 style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
가장 간단한 해결책은 왼쪽 div 너비를 100%로 만드는 것입니다. 오른쪽 div 너비에 두 값 사이의 여백을 더하는 것입니다.
<div class="cont">
<div class="search">
Big Logo Text
</div>
<nav>
<ul class="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>
</nav>
</div>
.cont{
display: inline-grid;
grid-template-columns: 160px 10px calc(100% - 170px);
grid-template-rows: auto;
grid-template-areas: "search . navigation";
width: 100%;
height: auto;
text-align: center;
}
.search {
grid-area: search;
height: 90px;
background-color: #00FF00;
line-height: 80px;
font-size: 1.4rem;
font-weight: 600;
}
nav {
grid-area: navigation;
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
저는 몇몇 jquery를 배치하려고 시도하다가 같은 문제에 부딪혔습니다.UI 컨트롤.비록 현재 일반적인 철학은 "사용"이지만,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>
언급URL : https://stackoverflow.com/questions/1032914/how-to-make-a-div-fill-a-remaining-horizontal-space
'programing' 카테고리의 다른 글
| jQuery를 사용하여 요소 ID의 콜론 처리 (0) | 2023.08.07 |
|---|---|
| "AutoSize"를 Excel 시트 열로 설정하는 방법(NPOI) (0) | 2023.08.07 |
| 도커 컨테이너는 몇 개의 CPU를 사용합니까? (0) | 2023.08.07 |
| 현재 실행 중인 PowerShell 스크립트의 경로 (0) | 2023.08.07 |
| SQL*Plus는 SQL Developer가 실행하는 SQL 스크립트를 실행하지 않습니다. (0) | 2023.08.07 |