位置：固定和宽度：自动

我想要做一个灵活的列和元素与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

位置：固定和宽度：自动

回答

相关问题