css - 以半流体布局显示内联左列和主列

我正在修改magento中的现代主题以使其宽度最大为1280px。

一切似乎都正常，除了当左列为固定宽度并且主列扩展为填充其余空间时，我无法使左列和主列（在第2列-左布局中）内联显示。我使它起作用的唯一方法是绝对定位左列，这不允许包装器随左列内容一起扩展。

希望这有点道理。无论如何，这是我目前用于临时绝对定位修复的HTML和CSS。我已经尝试过使用float和inline-blocks以及其他通过Google找到的其他方法，但是似乎都无法使用。问题的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; }

最佳答案

我似乎记得很早以前就做过这样的事情，解决方案非常复杂。使用负边距等。幸运的是，我认为我发现了有关smashingmag的文章，并解释了如何进行此操作-您可能需要对其进行更改，因为该示例将正文设置为80％，但我认为，该想法应在全幅网站上起作用。希望这可以帮助：

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

关于css - 以半流体布局显示内联左列和主列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11055932/