Cách căn chỉnh hai div cạnh nhau bằng cách sử dụng các phần tử float, clear và overflow với vị trí cố định div/

Vì vậy, tôi đã cố gắng sắp xếp hai div cạnh nhau mà không chồng chéo. Tôi có một div sẽ được cố định như một sidebar và div bên phải là nội dung. Hy vọng có ai đó có thể giúp tôi.Cách căn chỉnh hai div cạnh nhau bằng cách sử dụng các phần tử float, clear và overflow với vị trí cố định div/

HTML:

<div id="wrapper"> 
    <div id="leftcolumn"> 
    </div> 
    <div id="rightcolumn"> 
    </div> 
</div>

CSS:

body { 
    background-color: #444; 
    margin-top: 0; 
    margin-bottom: 0; 
} 

#wrapper { 
    width: 1005px; 
    margin: 0 auto; 
    padding: 0; 
    overflow: auto; 
} 

#leftcolumn { 
    width: 250px; 
    background-color: #111; 
    padding: 0; 
    margin: 0; 
    display: block; 
    border: 1px solid white; 
    position: fixed; 
} 

#rightcolumn { 
    width: 750px; 
    background-color: #777; 
    display: block; 
    float: left; 
    border: 1px solid white; 
}

Nguồn

2013-08-20 Esteban Rodriguez

bạn hoặc vị trí của người dùng: Cố định hoặc nổi - không phải cả hai. – peterchon

@peterchon Tôi đã xóa phần tử float có gì đó để thêm hoặc thay đổi? –

Nếu cột bên phải của bạn là nội dung thì tại sao nó lại có nhiều skinnier? – crush

Câu trả lời này có thể phải được sửa đổi tùy thuộc vào wha bạn đã cố gắng đạt được với position: fixed;. Nếu tất cả các bạn muốn là hai cột cạnh nhau sau đó chỉ cần làm như sau:

http://jsfiddle.net/8weSA/1/

Tôi chỉ đơn giản là nổi cả hai cột bên trái. Tôi đã thêm min-height vào mỗi cột cho mục đích minh họa.

HTML

<div id="wrapper"> 
    <div id="leftcolumn"> 
     Left 
    </div> 
    <div id="rightcolumn"> 
     Right 
    </div> 
</div>

CSS - bạn sẽ nhận thấy tôi đơn giản hóa CSS của bạn

body { 
    background-color: #444; 
    margin: 0; 
}  
#wrapper { 
    width: 1005px; 
    margin: 0 auto; 
} 
#leftcolumn, #rightcolumn { 
    border: 1px solid white; 
    float: left; 
    min-height: 450px; 
    color: white; 
} 
#leftcolumn { 
    width: 250px; 
    background-color: #111; 
} 
#rightcolumn { 
    width: 750px; 
    background-color: #777; 
}

Nếu bạn muốn cột bên trái để ở lại khi bạn cuộn làm như sau :

http://jsfiddle.net/8weSA/2/

Ở đây chúng tôi thả cột bên phải sang bên phải trong khi thêm position: relative; đến #wrapper và position: fixed; đến #leftcolumn. Tôi lại sử dụng min-height cho mục đích minh họa và có thể được xóa theo nhu cầu của bạn.

CSS

body { 
    background-color: #444; 
    margin: 0; 
} 
#wrapper { 
    width: 1005px; 
    margin: 0 auto; 
    position: relative; 
} 
#leftcolumn, #rightcolumn { 
    border: 1px solid white; 
    min-height: 750px; 
    color: white; 
} 
#leftcolumn { 
    width: 250px; 
    background-color: #111; 
    min-height: 100px; 
    position: fixed; 
} 
#rightcolumn { 
    width: 750px; 
    background-color: #777; 
    float: right; 
}

Nguồn

2013-08-20 21:18:31 hungerstar

Cảm ơn bạn. Cái này cũng rất tuyệt. –

Hãy thử điều này:

<div id="wrapper"> 
    <div class="float left">left</div> 
    <div class="float right">right</div> 
</div> 

#wrapper {width:500px; height:300px; position:relative;} 
.float {background-color:black; height:300px; margin:0; padding:0; color:white;} 
.left {background-color:blue; position:fixed; width:400px;} 
.right {float:right; width:100px;}

jsFiddle: http://jsfiddle.net/khA4m

Nguồn

2013-08-20 21:15:59 peterchon

cũng thêm CSS clearfix trên #wrapper của bạn. – peterchon

Cảm ơn một nhóm. Tôi đã tùy chỉnh nó một chút và bây giờ tôi đang theo dõi cách tôi muốn tạo kiểu cho nó. –

tuyệt vời - vui vì tôi có thể giúp đỡ. – peterchon

tôi đã này:

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>AutoDealer</title> 
     <style> 
     .container{ 
      width: 860px; 
      height: 1074px; 
      margin-right: auto; 
      margin-left: auto; 
      border: 1px solid red; 

     } 
     .nav{ 

     } 
     .wrapper{ 
      display: block; 
      overflow: hidden; 
      border: 1px solid green; 
     } 
     .otherWrapper{ 
      display: block; 
      overflow: hidden; 
      border: 1px solid green; 
      float:left; 
     } 
    .left{ 
     width: 399px; 
     float: left; 
     background-color: pink; 
    } 
      .bottom{ 
     clear: both; 
     width: 399px; 
     background-color: yellow; 



    } 
    .right{ 
     height:350px; 
     width: 449px; 
     overflow: hidden; 
     background-color: blue; 
     overflow: hidden; 
     float:right; 
    } 

    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="nav"></div> 
     <div class="wrapper"> 
     <div class="otherWrapper"> 
      <div class="left"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p> 
      </div> 
      <div class="bottom"> 
       <p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p></div> 
      </div> 

      <div class="right"> 
       <p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p> 
      </div> 
     </div> 
    </div> 
</body>

Vì vậy, về cơ bản tôi chỉ cần thực hiện một div để quấn màu hồng và màu vàng, và tôi chắc rằng div có một float: còn lại trên đó. Div màu xanh dương có một phao: ngay trên đó.

Nguồn

2016-06-09 04:19:10

Mã của bạn là chính xác. Vui lòng đánh dấu hiệu chỉnh nhỏ.

#rightcolumn { 
    width: 750px; 
    background-color: #777; 
    display: block; 
    **float: left;(wrong)** 
    **float: right; (corrected)** 
    border: 1px solid white; 
}

Nguồn

2018-02-25 06:37:24

Cách căn chỉnh hai div cạnh nhau bằng cách sử dụng các phần tử float, clear và overflow với vị trí cố định div/

Trả lời

Các vấn đề liên quan