我正在修改 magento 中的现代主题,使其宽度达到 1280 像素。
一切似乎都在工作,除了当左列是固定宽度并且主列扩展以填充其余部分时,我无法让左列和主列(在 2 列左布局中)内联显示空间。我让它工作的唯一方法是绝对定位左列,这不允许包装器再用左列内容扩展。
希望这有点道理。不管怎样,这是我目前使用的 HTML 和 css 以及我的临时绝对定位修复。我试过使用 float 和内联 block 以及我通过谷歌找到的其他一些方法,但似乎都没有用。问题 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%,但我认为这个想法应该适用于全宽网站。希望这有助于:
关于css - 在半流式布局中显示内联左栏和主栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11055932/