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

Program / 글쓴이

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/

답변

이를 위해 CSS Flexbox flex-grow 속성을 사용합니다 .

.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>

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

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

답변

나머지 공간을 차지해야하는 Div는 클래스 여야합니다. 다른 div는 id (s) 일 수 있지만 너비가 있어야합니다.

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>

다음 링크에는 나머지 영역 적용 문제를 해결해야하는 코드가 있습니다.

jsFiddle

답변

나는 중앙에 고정 너비 div가 필요하고 양쪽에 유동 너비 div가 필요한 반대 문제에 대한 해결책을 찾고 있었기 때문에 다음을 생각 해냈고 누군가가 필요할 경우를 대비하여 여기에 게시 할 것이라고 생각했습니다.

#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>

스 니펫 확장

#center요소 의 너비를 변경하면 너비 속성을 다음 과 같이 업데이트해야 .fluid합니다.

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