1

我正在尝试将灵活的列和元素与position:fixed. 这个想法是有 2 列，第一列是 a position: fixed menu，第二列是content和text。我希望文本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;
        }

我想要 [this (JSFiddle)[http://jsfiddle.net/frMxW/2/] 但要放在一边position:fixed，如果我想把较小的图像放在一边

知道我该怎么做吗？

非常感谢！

更新：我尝试了这个想法：将内容和放在一边display:inline-block，似乎在 Chrome 和 Firefox 中工作（如果我改变图像的宽度，一边留在那里）但它在 Opera 中不起作用，我无法尝试IE。这是我的尝试：http: //jsfiddle.net/9uGw4/7/

4

1 回答 1

0

[更新]这个解决方案对你有用吗？

我修复了<aside>和colLeft，并且内容的宽度设置为自动，两边都有边距。

于 2013-02-18T12:35:52.063 回答