div를 나란히 배치하는 방법

100 % 너비로 설정된 기본 래퍼 div가 있습니다. 그 안에는 두 개의 div가 있습니다. 하나는 고정 너비이고 다른 하나는 나머지 공간을 채 웁니다. 나머지 공간을 채우기 위해 두 번째 div를 플로팅하는 방법 도움을 주셔서 감사합니다.

원하는 것을 수행하는 방법에는 여러 가지가 있습니다.

1. CSS float속성 사용 :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>
   

2. CSS display속성 사용 - 다음 div과 같이 작동하도록하는 데 사용할 수 있습니다 table.

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>
   

더 많은 방법이 있지만 그 두 가지가 가장 많이 사용됩니다.

CSS3는 이 동작을 달성 할 수 있는 유연한 상자 (일명 flex 상자)를 도입했습니다 .

간단히 제 DIV의 폭을 정의하고 두 번째 경우 → 수득 flex-grow값 1이 부모의 나머지 폭을 기입 할 수있는있다.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFiddle 데모

플렉스 박스는 이전 브라우저와 호환되지 않지만 최신 브라우저를 대상으로하는 훌륭한 옵션입니다 ( 캐니 우스 및 MDN 참조 ). 플렉스 박스 사용법에 대한 포괄적 인 가이드는 CSS Tricks에서 구할 수 있습니다 .

HTML 및 CSS 디자인 전략에 대해 많이 알지 못하지만 간단한 것을 찾고 화면에 자동으로 맞는 (있는 그대로) 가장 직접적인 해결책은 div가 단어로 작동하도록하는 것입니다 단락. 지정해보십시오display: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

DIV의 너비를 지정하거나 지정하지 않아도됩니다.

CSS 그리드를 사용하여이를 달성 할 수 있습니다. 이것은 설명을위한 긴 버전입니다.

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

또는 float 및 margin을 사용하는보다 전통적인 방법입니다.

이 예제에서 배경색을 포함하여 사물이 어디에 있는지-또한 부동 영역 아래의 내용으로 수행 할 작업을 보여줍니다.

실생활에 스타일을 인라인으로 넣지 말고 스타일 시트에 추출하십시오.

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

첫 번째 div에 부동 소수점을 제공하고 두 번째 div에 100 % 너비를 부동 왼쪽으로 고정하십시오. 그 트릭을해야합니다. 아래에 품목을 배치하려면 아래에 배치 할 품목에 대한 명확한 정보가 필요합니다.

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

이것은 크로스 브라우저와 호환됩니다. 왼쪽 여백이 없으면 콘텐츠가 사이드 바보다 길면 왼쪽 끝까지 콘텐츠가 실행되는 문제가 발생합니다.

IE6을 태깅하지 않는 경우 두 번째를 플로팅 <div>하고 첫 번째 <div>고정 너비 와 같거나 약간 큰 여백을 제공하십시오 .

HTML :

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS :

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

여백은 '휴식 공간' <div>이 'fixed-width'보다 많은 콘텐츠를 포함 할 가능성을 설명합니다 <div>.

고정 너비를 배경으로 지정하지 마십시오. 이것을 다른 '열'로 보이게하려면 가짜 열 트릭 을 사용하십시오 .