>我已经创建了一个网格,现在最大宽度有问题。我想要占用可用宽度并受左右边距限制的容器。此容器可以包含子容器。这些子容器可能比父容器大,并且可以与类 .move-to-right-border 一起移动到右边框,以占据右侧的全宽。
我现在为容器添加了最大宽度,以限制宽度。但是现在我遇到了一个问题,即我无法将子元素设置为占用全宽。我尝试使用 100vw,但宽度为 100vw 包括滚动条。有没有人解决这个问题?
也许这个例子会更清楚,注释最大宽度进出以查看我想要什么。
.row-right {
box-sizing: border-box;
margin-left: 200px;
margin-right: 100px;
max-width: 700px; /* to see the problem comment max-width in and out */
width: calc(100% - 100px - 200px);
border: 1px solid red;
}
.move-to-right-border {
box-sizing: border-box;
width: calc(100% + 100px);
border: 2px solid blue;
}
http://codepen.io/anon/pen/eJymOL
只需在下面使用 css
.CSS
.row-right p {
text-align: justify;
width : 100%
}
希望这对你有所帮助:)
我认为你在追求这样的东西:
.parent{
position: relative;
height: 300px;
padding: 10px 0;
background-color: #99ff99;
text-align: center;
}
.container{
width: 200px;
margin: 0 auto;
height: 100px;
padding: 30px 0;
background-color: #ff9999;
}
.child{
position: absolute;
width: 100%;
height: 50px;
left: 0;
background-color: #9999ff;
}
<div class="parent">
This is parent
<div class="container">
This is container
<div class="child">
This is child
</div>
</div>
</div>