css網格100％寬度和最大寬度

我已經創建了一個網格，現在有最大寬度的問題。我想要容器佔用可用的寬度並受到左右邊距的限制。這個容器可以包含孩子。這些孩子可能比父容器大一些，可能會隨班級移動。移到右邊框到右邊框，佔據右邊的全寬。css網格100％寬度和最大寬度

我現在已經在容器中添加了最大寬度來限制寬度。但現在我有問題，我不能設置子元素佔用全寬。我嘗試了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

來源

2016-01-20 geierwally

你只是瓦納保持均勻利潤率在兩側？你有沒有嘗試添加填充到你的身體？ body {padding-right：200px;}通過你的鋼筆似乎對我很好。 – Patrick

我已經建立了一個網格，其中的行可以有不同的邊距，這就是邊距被添加到行右邊的原因。可能有另一行表現不同。 – geierwally

只需使用下面的CSS

CSS

.row-right p { 
    text-align: justify; 
    width : 100% 
}

希望這將幫助你:)

來源

2016-01-20 13:14:38

我覺得這樣的事情後ü按r：

.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>

來源

2016-01-20 13:19:00 Trix

css網格100％寬度和最大寬度

回答

相關問題