디브를 나란히 두는 방법

디브를 나란히 두는 방법

이 질문에는 이미 다음과 같은 답변이 있습니다.

두 디브 나란히 - 오일 디스플레이 (10개 답변)

닫힘3개월 전에.

저는 폭 100%로 설정된 메인 포장지 디브가 있습니다.그 안에 하나는 고정 폭이고 다른 하나는 나머지 공간을 채우는 두 개의 디브를 가지고 싶습니다.나머지 공간을 채우기 위해 두 번째 디브를 어떻게 띄우나요?도와주셔서 감사합니다.

요청한 작업을 수행하는 데는 여러 가지 방법이 있습니다.

1. CSS 속성 사용:

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

2. CSS 속성 사용 - 를 만드는 데 사용할 수 있습니다.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는 이러한 동작을 달성할 수 있는 플렉서블 박스(일명 플렉스 박스)를 도입했습니다.

첫번째 div의 폭을 정의하고, 두번째 div에 a를 주면 됩니다.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>

데모:

div {
    color: #fff;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    padding: 10px;
}
.container {
    background-color:#2E4272;
    display:flex;
}
.fixed {
    background-color:#4F628E;
    width: 200px;
}
.flex-item {
    background-color:#7887AB;
    flex-grow: 1;
}

<div class="container">
    <div class="fixed">Fixed width</div>
    <div class="flex-item">Dynamically sized content</div>
</div>

플렉스 박스는 이전 브라우저와 역호환되지는 않지만 현대 브라우저를 대상으로 하는 데 좋은 옵션입니다(Caniuse 및 MDN 참조).플렉스 박스를 사용하는 방법에 대한 훌륭한 포괄적인 가이드는 CSS 트릭에서 이용할 수 있습니다.

HTML 및 CSS 설계 전략에 대해서는 잘 모르지만, 간단한 것을 찾고 있다면 화면에 자동으로 맞는 것을 찾고 있다면(나는 그대로) 가장 간단한 해결책은 디브가 문단에서 단어처럼 행동하도록 만드는 것이라고 생각합니다.지정해 보기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>

또는 플로트와 마진을 사용하는 더 전통적인 방법.

이 예제에 배경색을 포함시켜 사물이 어디에 있는지, 또한 플로팅 영역 아래의 콘텐츠로 무엇을 해야 하는지를 보여줍니다.

실생활에서 자신의 스타일을 일렬로 세우지 말고 스타일 시트에 추출합니다.

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 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>는 너비' 비'할 수 .<div>.

고정 너비 1을 배경으로 지정하지 마십시오. 눈에 띄게 다른 '열'로 볼 필요가 있는 경우에는 Faux Columns 트릭을 사용하십시오.

번째 시오를 .float: left;된 폭, 그리고 두폭,다를 합니다.width: 100%;그리고.float: left;그것이 효과가 있어야 해요.그 아래에 물건들을 배치하고 싶다면 당신은 다음이 필요합니다.clear: both;아래에 배치할 항목에 저장합니다.

언급URL : https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side