我想要一个单列布局,其中文本正文的最大宽度应为 30em,但应尽可能宽(最多 30em)。
左边距(文本主体左边缘与浏览器窗口左边缘之间的空白区域)最多应为 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;
}
最佳答案
我会使用类似于您所拥有的东西,但可能会远离 float 并完全消除 .left
和 .right
,然后使用媒体查询来管理左边距:
.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;
}
}
关于css - 具有流畅侧边栏和最大宽度主列的一列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15660016/