1

私はマゼントのモダンなテーマを1280pxの幅まで流動的になるように変更しています。

左の列が固定幅で、メインの列が残りのスペースを埋めるために拡張されている場合、左の列とメインの列（2列-左のレイアウト）をインラインで表示できないことを除いて、すべてが機能しているようです。これを機能させる唯一の方法は、左の列を絶対位置に配置することです。これにより、ラッパーが左の列のコンテンツで展開できなくなります。

うまくいけば、それは少し理にかなっています。とにかく、これが私の一時的な絶対位置修正で現在使用しているHTMLとcssです。私はフロートとインラインブロック、そしてグーグルで見つけた他のいくつかの方法を使ってみましたが、どれもうまくいかなかったようです。問題のdivはcol-leftとcol-mainです。

どんな助けでも大歓迎です。

HTML：

    <div class="page">

        <div class="main-container col2-left-layout">

            <div class="main">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
                <div class="col-main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
        <div style="clear:both"></div>

            </div>

        </div>

        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>

    </div>

CSS

.page { width:80%; margin:15px auto 0; text-align:left; min-width:960px; max-width: 1280px;position:relative;}
.main-container {position:relative;float:left;clear:both;}
.main { background:#fff; border:1px solid #bbb;position:relative;float:left; padding-top:10px;width:100%;}

/* Base Columns */
.col-left { width:220px;float:left;position:absolute; left:10px;top:10px;z-index:1000;}
.col-main {  padding:0px 10px 10px 220px; float:left; margin-left:20px; }
.col-right { float:right; width:220px; padding:0 0 1px; }
4

1 に答える 1

0

私はずっと前にこのようなことをしたことを覚えているようです。解決策は非常に複雑です。負のマージンなどを使用します。幸いなことに、smashingmagに関する記事で、その方法を説明していると思います。例では本体が80％に設定されているため、変更する必要があるかもしれませんが、theideaは全幅サイトで機能するはずです。お役に立てれば：

http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/

于 2012-06-15T18:13:52.760 に答える