programing

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

oldcodes 2023. 8. 27. 09:53
반응형

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

제 요구 사항은 간단합니다. 오른쪽 열이 고정된 크기를 가진 두 개의 열입니다.안타깝게도 스택 오버플로나 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 코드에서 오른쪽 열은 왼쪽 열 앞에 와야 합니다.

오른쪽에 플로트(및 폭)가 있고 왼쪽 열에 폭이 없고 플로트가 없으면 유연합니다 :)

또한 an을 적용합니다.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;
}

여기 이 개념을 좀 더 복잡한 레이아웃에 적용한 또 다른 JSFidle이 있습니다.변수가 유연하고 자체 설명적인 코드를 허용하기 때문에 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>

다른 해결책은 디스플레이: 테이블 셀을 사용하는 것이며, 이는 동일한 높이의 열을 생성됩니다.

이봐, 당신이 할 수 있는 것은 두 용기에 고정된 너비를 적용하고 명확한 다른 div 클래스를 사용하는 것입니다: 둘 다, 좋아요.

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

왼쪽과 오른쪽 용기 아래에 클리어 디브를 놓습니다.

나는 그것을 단순화했습니다: 나는 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>

로렘 입섬돌이나 자리에 앉기, 콘셉튜어 디핑엘리트.위상 변이체 생명체.로렘 입섬돌이나 자리에 앉기, 콘셉튜어 디핑엘리트.위상 변이체 생명체.

</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>

언급URL : https://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid

반응형

'programing' 카테고리의 다른 글

페이지 로드 시 Twitter 부트스트랩 회전 장치가 자동으로 미끄러지지 않도록 방지  (0) 2023.08.27
Jquery agaxStart가 트리거되지 않음  (0) 2023.08.27
Git 저장소에 존재했던 모든 파일 나열  (0) 2023.08.27
execCommand()는 이제 더 이상 사용되지 않습니다. 대안은 무엇입니까?  (0) 2023.08.27
' 서스크사안함에용롤'에서 안 함' 서스크사안함에용롤'에서 안 함' 서스크사안함에용롤'에서 안 함```  (0) 2023.08.27

'programing'의 다른글

  • 현재글2열 div 레이아웃: 고정 너비의 오른쪽 열, 왼쪽 유체

관련글

댓글

티스토리툴바