2 열 div 레이아웃 : 너비가 고정 된 오른쪽 열, 왼쪽 유체

내 요구 사항은 간단합니다 .2 열은 올바른 크기가 고정되어 있습니다 . 불행히도 나는 stackoverflow 또는 Google에서 작동하는 솔루션을 찾을 수 없었습니다. 내 컨텍스트에서 구현하면 거기에 설명 된 각 솔루션이 실패합니다. 현재 솔루션은 다음과 같습니다.

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

위의 코드로 다음을 얻습니다.

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

조언 부탁드립니다. 많은 감사합니다!

왼쪽 열의 플로트를 제거하십시오.

HTML 코드에서 오른쪽 열은 왼쪽 열보다 먼저 와야합니다.

오른쪽에 부동 (및 너비)이 있고 왼쪽 열에 너비가없고 부동이 없으면 유연합니다. :)

또한 overflow: hidden외부 div에 일부 높이 (자동 가능)를 적용하여 내부 div를 모두 둘러싸십시오.

마지막으로, 왼쪽 열에서, 추가 width: auto및 overflow: hidden브라우저 창 크기를 조절하고, 오른쪽 열에는 이러한 속성없이, 왼쪽 하나를 만지면, 이것이 바로 하나에서 왼쪽 열 독립을한다 (예를 들어, 왼쪽 열이 실행됩니다 이 속성을 사용하면 올바른 공간을 유지합니다.

HTML 예 :

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS :

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

예 : http://jsfiddle.net/jackJoe/fxWg7/

http://www.alistapart.com/articles/negativemargins/를 참조 하십시오 . 이것이 바로 필요한 것입니다 ( 예 4 ).

<div id="container">
    <div id="content">
        <h1>content</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
        <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
    </div>
</div>

<div id="sidebar">
    <h1>sidebar</h1>
    <ul>
        <li>link one</li>
        <li>link two</li>
    </ul>
</div>

#container {
    width: 100%;
    background: #f1f2ea url(background.gif) repeat-y right;
    float: left;
    margin-right: -200px;
}
#content {
    background: #f1f2ea;
    margin-right: 200px;
}
#sidebar {
    width: 200px;
    float: right;

오른쪽 열을 왼쪽 앞에 배치하지 않으려면 음수 오른쪽 마진을 사용하십시오.

@media 설정을 포함시켜 "응답 성"을 유지하면 오른쪽 열이 좁은 화면에서 왼쪽 아래로 떨어집니다.

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar</strong>
  </div>
<div style="clear:both"></div>

<style type="text/css">
#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
    width:300px;
    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}
</style>

지금까지 가장 간단하고 유연한 솔루션table display :

HTML, 왼쪽 div가 먼저오고 오른쪽 div가 두 번째로옵니다 ... 우리는 왼쪽에서 오른쪽으로 읽고 씁니다. 따라서 div를 오른쪽에서 왼쪽으로 배치하는 것은 의미가 없습니다.

<div class="container">
    <div class="left">
        left content flexible width
    </div>
    <div class="right">
        right content fixed width
    </div>
</div>

CSS :

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

.left {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}​​

.right {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}

사례 예 :

// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}

// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}

아직 언급되지 않은 솔루션을 제안하고 싶습니다 .CSS3를 사용 calc()하여 혼합 %하고 px단위를 지정하십시오. calc()이 우수한 지원 요즘, 그것은 매우 복잡한 레이아웃을 신속하게 건설 할 수 있습니다.

여기 JSFiddle이 있습니다 아래 코드에 대한 링크.

HTML :

<div class="sidebar">
  sidebar fixed width
</div>
<div class="content">
  content flexible width
</div>

CSS :

.sidebar {
    width: 180px;
    float: right;
    background: green;
}

.content {
    width: calc(100% - 180px);
    background: orange;
}

이 개념이 더 복잡한 레이아웃에 적용 되었음을 보여주는 또 다른 JSFiddle 이 있습니다. 여기서는 SCSS를 사용하여 변수에 유연하고 자기 기술적 인 코드를 사용할 수 있었지만 "하드 코딩 된"값이 문제가되지 않으면 순수 CSS로 레이아웃을 쉽게 다시 만들 수 있습니다.

다음과 같은 일반적인 HTML 소스 주문형 솔루션입니다.

• 소스 순서의 첫 번째 열은 유동적입니다
• 소스 순서의 두 번째 열은 고정되어 있습니다.
  • 이 열은 CSS를 사용하여 왼쪽 또는 오른쪽으로 띄울 수 있습니다

오른쪽의 고정 / 두 번째 열

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

왼쪽의 고정 / 두 번째 열

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

다른 해결책은 display : table-cell ; 동일한 높이의 열이 생성됩니다.

이봐, 당신이 할 수있는 일은 컨테이너에 고정 너비를 적용하고 clear : both와 같은 다른 div 클래스를 사용하는 것입니다.

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

왼쪽 및 오른쪽 컨테이너 아래에 명확한 div를 배치하십시오.

나는 그것을 단순화했다 : 나는 jackjoe의 답변을 편집했다. 높이 자동 등 필요하지 않다고 생각합니다.

CSS :

#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}

#leftCol {
background: #e8f6fe;
width: auto;
}

#rightCol {
float:right;
width:30%;
background: #aafed6;
}

.box {
position:relative;
clear:both;
background:#F39;
 }
</style>

HTML :

<div id="container">

  <div id="rightCol"> 
   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>

 <div id="leftCol">

   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

Lorem ipsum dolor 앉은 자세, consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor는 앉은 자세로, consectetuer addipiscing elit.Phasellus varius eleifend입니다.

</div>

</div>

<div class="box">
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>