서로 옆에 CSS 두 div <div>서로 옆 에

<div>서로 옆 에 두 개의을 넣고 싶습니다 . 오른쪽 <div>은 약 200px입니다. 왼쪽 <div>이 나머지 화면 너비를 채워야합니까? 어떻게해야합니까?

답변

flexbox 를 사용 하여 항목을 레이아웃 할 수 있습니다.

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

스 니펫 확장

이것은 기본적으로 flexbox의 표면을 긁는 것입니다. Flexbox는 매우 놀라운 일을 할 수 있습니다.

오래된 브라우저 지원의 경우 CSS float 및 width 속성을 사용하여 해결할 수 있습니다.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}
<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

스 니펫 확장

답변

이것이 여전히 현재 문제인지 아닌지는 모르겠지만 동일한 문제가 발생하여 CSS display: inline-block;태그를 사용했습니다 . 그것들을 적절하게 배치 할 수 있도록 div에 포장하십시오.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

인라인 스타일 속성의 사용은 물론이 예제의 간결함에만 사용되었으며 외부 CSS 파일로 이동되었습니다.

답변

불행히도, 이것은 일반적인 경우에 해결하기 쉬운 일이 아닙니다. 가장 쉬운 방법은 CSS 스타일 속성 인 “float : right;”를 추가하는 것입니다. 그러나 200px div에는 “main”-div가 실제로 전체 너비가되고 200px-div의 가장자리 주위에 텍스트가 부유하여 내용에 따라 종종 이상하게 보입니다. 플로팅 이미지 인 경우를 제외하고 모든 경우에).

편집 :
Dom이 제안한 것처럼 래핑 문제는 물론 마진으로 해결할 수 있습니다. 바보 나.

답변

@roe 및 @MohitNanda가 제안한 방법은 작동하지만 올바른 div가로 설정된 float:right;경우 HTML 소스에서 먼저 와야합니다. 이렇게하면 왼쪽에서 오른쪽으로 읽는 순서가 깨져서 스타일이 해제 된 상태에서 페이지가 표시되는 경우 혼동 될 수 있습니다. 이 경우 래퍼 div와 절대 위치를 사용하는 것이 좋습니다.

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

시연 :

왼쪽 오른쪽

편집 : 흠, 흥미로운. 미리보기 창에 올바른 형식의 div가 표시되지만 렌더링 된 게시물 항목은 표시되지 않습니다. 죄송합니다. 직접 해봐야합니다.

답변

나는 오늘이 문제에 부딪쳤다. 위의 솔루션을 기반으로 이것은 나를 위해 일했습니다.

<div style="width:100%;">
    <div style="float:left;">Content left div</div>
    <div style="float:right;">Content right div</div>
</div>

부모 div를 전체 너비로 확장하고 그 안에 포함 된 div를 플로팅하면됩니다.

답변

최신 정보

행에 요소를 배치해야하는 경우 Flex Layout을 사용할 수 있습니다 . 여기 또 다른 Flex 튜토리얼이 있습니다. 훌륭한 CSS 도구이며 100 % 호환되지는 않지만 매일 지원 이 향상되고 있습니다. 이것은 다음과 같이 간단하게 작동합니다.

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

그리고 여기에 도착하는 것은 총 4 단위의 컨테이너로 1/4 및 3/4의 관계로 하위 공간을 공유합니다.

CodePen에서 문제를 해결하는 예제를 작성했습니다. 도움이 되길 바랍니다.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

아주 오래된

어쩌면 이것은 말도 안되는 일이지만 테이블로 시도해 보셨습니까? div 배치에 CSS를 직접 사용하지는 않지만 정상적으로 작동합니다.

1×2 테이블을 만들고 divs내부를 넣은 다음 CSS로 테이블을 포맷하여 원하는대로 넣을 수 있습니다.

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

노트

테이블을 사용하지 않도록하려면, 이전, 사용할 수있는 것을 float: left;하고 float: right;다음과 같은 요소로하는 추가하는 것을 잊지 마세요 clear: left;, clear: right;또는 clear: both;청소 위치를하기 위해.

답변

div1 {
    float: right;
}
div2 {
    float: left;
}

이 clear: both두 열 블록을 구분하는 요소에 대해 설정 한 한 정상적으로 작동합니다.