Program Tip

div가 나머지 너비를 채우도록합니다.

programtip 2020. 10. 9. 12:18
반응형

div가 나머지 너비를 채우도록합니다.

div가 나머지 너비를 채우도록하려면 어떻게해야합니까?

예 :

<div id="Main" style="width: 500px;">
  <div id="div1" style="width: 100px;"></div>
  <div id="div2"></div>
  <div id="div3" style="width: 100px; float: right;"></div>
</div>

나머지를 채우기 위해 div2를 얻으려면 어떻게해야합니까?

다음과 같이 시도하십시오.

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

div는 자연스럽게 컨테이너 너비의 100 %를 차지하므로이 너비를 명시 적으로 설정할 필요가 없습니다. 두 개의 측면 div와 동일한 왼쪽 / 오른쪽 여백을 추가하면 자체 콘텐츠가 그 사이에 강제로 배치됩니다.

"middle div"는 HTML에서 "right div" 뒤에 옵니다.

최신 솔루션 (2014 년 10 월) : 유동적 인 레이아웃 준비

소개:

이 솔루션은에서 제공하는 솔루션보다 훨씬 간단합니다 Leigh. 그것은 실제로 그것을 기반으로합니다.

여기에서 중간 요소 (이 경우 "content__middle"클래스 포함)에 치수 속성이 지정 되지 않았 음을 알 수 있습니다. 너비도 패딩도없고 여백 관련 속성도 전혀 지정되지 않았지만 overflow: auto;(참고 1 참조).

가장 큰 장점은 이제 왼쪽 및 오른쪽 요소에 a max-width및 a min-width를 지정할 수 있다는 것입니다 . 유동적 인 레이아웃에 환상적입니다. 따라서 반응 형 레이아웃 :-)

참고 1 : 클래스에 margin-left& margin-right속성을 추가해야하는 경우 Leigh의 대답과 비교 합니다 "content__middle".

유동적이지 않은 레이아웃이있는 코드 :

여기서 (클래스와 좌측 및 우측 요소 "content__left"및 "content__right")을 가지고 고정 된 폭 (픽셀)을 : 따라서 호출 비 - 유체 레이아웃.

http://jsbin.com/qukocefudusu/1/edit?html,css,output의 라이브 데모

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

유동적 인 레이아웃이있는 코드 :

여기서 (클래스와 좌측 및 우측 요소 "content__left"및 "content__right")은이 가변 폭 (백분율)에서뿐만 아니라, 최소와 최대 폭 : 유체 따라서 배치했다.

http://jsbin.com/runahoremuwu/1/edit?html,css,outputmax-width 속성이 있는 유동적 인 레이아웃의 라이브 데모

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

브라우저 지원

다음 웹 브라우저의 BrowserStack.com에서 테스트되었습니다.

  • IE7에서 IE11로
  • Ff 20, Ff 28
  • Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)
  • Chrome 20, Chrome 25, Chrome 30, Chrome 33,
  • 오페라 20

Flex-box가 해결책이며 환상적입니다. 저는 10 년 동안 CSS에서 이와 같은 것을 원했습니다. 당신이 필요로하는 display: flex것은 당신의 스타일에 "Main" 을 추가 하는 것뿐입니다. flex-grow: 100(100은 임의적입니다-정확히 100이되는 것은 중요하지 않습니다). 이 스타일을 추가해보십시오 (효과를 보이게하기 위해 추가 된 색상) :

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

플렉스 박스에 대한 자세한 정보 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox 솔루션

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}
<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>

참고 : 지원되는 브라우저에서 필요한 경우 가변 공급 업체 접두사를 추가 합니다 .

bit답변 게시 가 늦었지만 여백을 사용하지 않는 대안이 있습니다.

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

이 방법은 마법처럼 작동하지만 여기 에 설명이 있습니다. :) \

여기에 비슷한 샘플을 사용하여 바이올린을 연주합니다.

The Div that has to take the remaining space has to be a class.. The other divs can be id(s) but they must have width..

CSS:

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML:

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

The following link has the code in action, which should solve the remaining area coverage issue.

jsFiddle

I was looking for a solution to the opposite problem where I needed a fixed width div in the centre and a fluid width div on either side, so I came up with the following and thought I'd post it here in case anyone needs it.

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}
<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>

If you change the width of the #center element then you need to update the width property of .fluid to:

width: calc(50% - [half of center width]px);

참고URL : https://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width

반응형

'Program Tip' 카테고리의 다른 글

두 지점 사이의 거리 계산 (위도, 경도)  (0) 2020.10.09
오류 : " 'system.webServer / management / delegation'구성 섹션에 스키마가 없기 때문에 읽을 수 없습니다.  (0) 2020.10.09
"sort"명령을 사용하여 열 우선 순위별로 CSV 파일 정렬  (0) 2020.10.09
Git : 다른 브랜치에서 변경 사항 가져 오기  (0) 2020.10.09
관계가없는 경우 노드 반환  (0) 2020.10.09

'Program Tip'의 다른글

  • 현재글div가 나머지 너비를 채우도록합니다.

관련글

댓글

티스토리툴바