對響應的CSS寬度問題

這是我的小提琴：http://jsfiddle.net/o7pfjv3w/。我試圖給網格類a margin-left:10px和margin-right:10px;但滾動條出現。我如何擺脫它？對響應的CSS寬度問題

CSS代碼：

.main{width: 100%;border:1px solid black;overflow:auto;display:block;} 
.grid{width:100%; margin-left:10px;margin-right:10px}

的html代碼：

<div> 
    <div class="main"> 
     <div class="grid">   <p>ppppppppppppppp pppppppppppppppppppppppppppppp ppppppppppppppppppppppp ppppppppppppppp</p> 
     </div> 
    </div> 
</div>

來源

2015-08-28 Chester

因爲問題已經有答案而關閉。回答了問題的要求。 –

這既有margin和width: 100%。

.grid{width:100%; margin-left:10px;margin-right:10px;}

你需要確保你計算它。所以，相反，給padding，使box-sizing是border-box：

.grid{width:100%; padding-left:10px;padding-right:10px;box-sizing:border-box;}

小提琴：http://jsfiddle.net/o7pfjv3w/1/

來源

2015-08-28 09:59:31

是箱子尺寸：邊框;在所有瀏覽器上工作？ – Chester

是的，（來自IE 8+）在現代瀏覽器上，你可以看看[我可以使用'box-sizing']（http://caniuse.com/#feat=css3-boxsizing）嗎？ –

只要改變你的overflow:auto;到overflow:hidden;

.main{ 
    width: 100%; 
    border:1px solid black; 
    overflow:hidden; // not auto 
    display:block; 
}

這裏是更新jsfiddle

來源

2015-08-28 10:01:13 Subash

對響應的CSS寬度問題

回答

相關問題