流体侧边栏和最大宽度主柱

一列布局，我想有一列布局，其中文本主体应该有说30em的最大宽度，但应尽可能宽（最多30 em）。流体侧边栏和最大宽度主柱

左边距（文本正文和浏览器窗口的左侧边缘的左边缘之间的空白空间）应该是最多6EM，和收缩（如有必要，在较小的屏幕）。

右边距应使用剩余空间的可用。

我已经看到了这个问题：I need a max-margin CSS property, but it doesn't exist. How could I fake it? - 但我不明白如何在我的情况下使用它。这是我曾尝试（http://jsfiddle.net/y2rd8/1/）

<div class="left"></div> 
<div class="right"></div> 
<div class="body"> 
A wonderful serenity has taken possession of my entire soul, 
</div> 
<div style="clear: both;" />

和

.left, .right { 
    background: gray; 
} 

.left { 
    float: left; 
    max-width: 6em; 
} 
.right { 
    float: right; 
    width: auto; 
} 

.body { 
    max-width: 30em; 
    border: 1px solid green; 
}

来源

2013-03-27 topskip

我喜欢的东西，你有什么去，但也许从彩车摆脱和消除.left和.right干脆，然后使用媒体查询管理左边界：

http://jsfiddle.net/y2rd8/9

.body { 
    max-width: 30em; 
    border: 1px solid green; 
    margin-right: 1em; 
} 
@media screen and (max-width: 480px) { 
    .body { 
     margin-left: 2em; 
    } 
} 
@media screen and (min-width: 481px) { 
    .body { 
     margin-left: 4em; 
    } 
}

来源

2013-03-27 13:49:24 isherwood

没有真正美丽的:)）（我希望我有没有javascript中的平稳过渡），但现在的我现在的方式。非常感谢！ – topskip 2013-03-27 14:29:16

使用大小为内容最大宽度加上边距最大宽度两倍的媒体查询。

.body { 
    max-width: 30em; 
    border: 1px solid green; 
    margin: auto; 
} 
/* 42em = 30 + (2*6) */ 
@media screen and (min-width: 42em) { 
    .body { 
     margin-left: 6em; 
    } 
}

http://jsfiddle.net/schettino72/j9HpH/1/

来源

2014-06-30 08:48:37 schettino72

流体侧边栏和最大宽度主柱

回答

相关问题