我需要.aboutContent
保持相同的尺寸,但左边和右边的边距会缩小,同时缩小屏幕尺寸。
类似示例:Spotify website上的What’s on Spotify?
div框。
#about {
width: 1920px;
height: 500px;
display: flex;
}
.aboutContent {
width: 1250px;
height: 100%;
background-color: red;
margin-left: 20%;
}
<div id="about">
<div class="aboutContent"></div>
</div>
答案 0 :(得分:5)
我习惯爱你的原始标题(“Flexbox边缘或其他什么”),但是当James改变它时,现在我必须发布两个解决方案。多么美好的生活。
这是一些CSS或其他以内容为中心的内容。利润率和利润率的帮助东西。
浏览器支持:&gt; = IE7。应该这样做我猜。
div {
background-color: orange;
max-width: 500px;
margin: 0 auto;
}
<div>HTML or whatever</div>
现在标题明确 Flexbox ,这是一个新的代码段。而且以相同的价格,您将获得免费的Nicolas Cage图片。
浏览器支持:&gt; = IE11。也应该这样做,因为IE11以下浏览器的人不习惯看到正确布局的网站,我们不想混淆他们。
body {
display: flex;
justify-content: center;
}
img { /* Or div, or article, or whatever */
flex : 0 1 500px;
}
<img src="https://www.placecage.com/500/230"/>
顺便说一下,flex: 0 1 500px
表示:
这不是黑魔法f ** kery,flex is awesome。
答案 1 :(得分:0)
也许将最大宽度设置为与其父级相比固定值的某个百分比?