位置：固定和寬度：自動

我想要做一個靈活的列和元素與position:fixed結合的佈局。這個想法是有2列，第一個是position: fixed menu，第二個是內容和文本。我想要的文本是position: fixed，所以最終唯一移動的是正確的內容。 問題是內容寬度，它改變，所以我需要的內容的寬度爲汽車但當我結合width:auto與position:fixed它不起作用。位置：固定和寬度：自動

我覺得我的解釋是不夠清晰所以這裏是代碼：

HTML

<div class="pageWrap"> 
     <div class="colLeft"> 
      <nav> 
       <ul> 
        <li>ELEMENT 1</li> 
        <li>ELEMENT 2</li> 
        <li>ELEMENT 3</li> 
       </ul> 
      </nav> 
     </div> 
     <div class="colContent"> 
      <div class="content"> 
<img width="300" height="200" alt="1" src="http://lorempixel.com/output/nightlife-q-g-300-200-4.jpg"> 

<img width="300" height="200" alt="1" src="http://lorempixel.com/output/nightlife-q-g-300-200-4.jpg"> 

<img width="300" height="200" alt="1" src="http://lorempixel.com/output/nightlife-q-g-300-200-4.jpg"> 
      </div> 
      <aside> 
       <p>Lorem ipsum dolor sit amet, consectetuer 
       adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
       Cum sociis natoque penatibus et magnis dis parturient 
       ridiculus mus. </p>   
      </aside> 
     </div> 
</div>

CSS

.pageWrap { 
    width: 600px; 
    height: 1000px; 
    background-color: rgba(256, 0, 0, 0.5); 
} 

    .colLeft { 
     width: 100px; 
     float: left; 

     height: 100px; 
     background-color: rgba(0, 256, 0, 0.5); 

    } 
     nav{ 
      position:fixed; 
      background-color: rgba(0, 256, 0, 0.5); 
     } 

    .colContent { 
     width: 500px; 

     float:left; 
    } 
     .content { 
      float: left; 
      width: auto; 
     } 
     aside { 
      width: 200px; 
      float:left; 
      position:fixed; 
     }

我想[這樣（的jsfiddle） http://jsfiddle.net/frMxW/2/]但與position:fixed並且如果我想pu t更小的圖像旁邊留下的內容沒有差距

任何想法我可以做到這一點？

非常感謝！

更新：我想這樣的想法：把內容和一旁display:inline-block，似乎在Chrome和Firefox的工作（旁白在那裏停留，如果我改變圖像的寬度）但它不是在工作歌劇，我不能在IE瀏覽器嘗試。這是我的嘗試：http://jsfiddle.net/9uGw4/7/

來源

2013-02-18 lan.w

歡迎來到SO！當您添加jsfiddle時，儘量不要在問題中添加相同的CSS/HTML代碼！ – LGAP 2013-02-18 12:49:33

好的，對不起，我刪除了html和css。 – 2013-02-18 13:26:53

@LGAP這只是**錯**。如果JSFiddle鏈接被刪除會怎麼樣？這個問題對未來的訪問者來說是無用的。爲什麼鼓勵用戶把代碼放在他們的問題中是有原因的 – Bojangles 2013-02-18 14:43:00

[已更新]請問this solution適合你嗎？

我修正了<aside>和colLeft，並且內容的寬度設置爲auto，兩邊都有空白。

來源

2013-02-18 12:35:52 Bigood

嗨，謝謝！但我認爲我還不夠清楚。我想把這個問題修復一下 – 2013-02-18 12:43:24

@ user2083117查看更新後的小提琴 – Bigood 2013-02-18 12:49:34

問題是內容本身和旁邊的差距。我希望能夠放置更小或更大的圖像，並將旁邊的內容留在旁邊。 – 2013-02-18 12:52:44

位置：固定和寬度：自動

回答

相關問題