서로 옆에 CSS 두 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를 직접 사용하지는 않지만 정상적으로 작동합니다.

1x2 테이블을 만들고 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두 열 블록을 구분하는 요소에 대해 설정 한 한 정상적으로 작동합니다.

나는 같은 문제에 부딪 쳤고 Mohits 버전이 작동합니다. HTML에서 왼쪽 오른쪽 순서를 유지하려면 이것을 시도하십시오. 필자의 경우 왼쪽 div가 크기를 조정하고 오른쪽 div는 너비 260px로 유지됩니다.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

트릭은 메인 박스에 오른쪽 패딩을 사용하지만 오른쪽 상자를 오른쪽 여백으로 다시 배치하여 해당 공간을 다시 사용하는 것입니다.

float과 overflow-x : hidden을 혼합하여 사용합니다. 최소한의 코드, 항상 작동합니다.

https://jsfiddle.net/9934sc4d/4/-또한 플로트를 지울 필요가 없습니다!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

모든 사람들이 지적했듯이 float:right;RHS 내용에 L 을 설정 하고 LHS에 마이너스 마진을 설정하면 됩니다.

그러나 .. float: left;Mohit처럼 LHS를 사용하지 않으면 LHS div가 여전히 레이아웃에서 여백의 공간을 소비하기 때문에 스테핑 효과가 발생합니다.

그러나 LHS 플로트는 내용물을 줄 바꿈하므로 허용되지 않는 경우 정의 된 너비 자식 노드를 삽입해야합니다.이 시점에서 부모의 너비를 정의했을 수도 있습니다.

그러나 David가 지적한대로 LHS 플로트 요구 사항을 피하기 위해 마크 업의 읽기 순서를 변경할 수 있지만 가독성 및 접근성 문제가 있습니다.

그러나이 문제는 추가적인 마크 업이 주어진 수레 로 해결 될 수 있습니다.

(캐비티 : 해당 예에서 .clearing div를 승인하지 않습니다. 자세한 내용 은 여기 를 참조하십시오)

모든 것을 고려했을 때, 우리 대부분은 욕심없는 너비가 있기를 바랍니다 .CSS3에 남아 있습니다 ...

이것은 IE7-에서 지원되지 않기 때문에 모든 사람에게 답이 될 수는 없지만 IE7-에 대해서는 대체 답변을 사용할 수 있습니다. display : table, display : table-row 및 display : table-cell입니다. 이것은 레이아웃을 위해 테이블을 사용하지 않고 div 스타일을 지정하여 위의 모든 번거 로움이 없도록 정렬합니다. 광산은 html5 앱이므로 훌륭하게 작동합니다.

이 기사는 예를 보여줍니다 : http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

스타일 시트는 다음과 같습니다.

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

비슷한 일을하는 내 웹 사이트 중 하나를 역설하는 방법 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

z- 색인을 사용하면 모든 것이 멋지게됩니다. 위치가 고정 또는 절대로 표시되어 있는지 확인하십시오. 플로트 태그처럼 아무것도 움직이지 않습니다.