CSS顯示錶格寬度溢出

我的頁面上有兩個元素，像報紙頁面上的文章一樣排列在一起。其中一個元素是<aside>標記，主要內容爲<section>標記。CSS顯示錶格寬度溢出

容器的左側有15px的餘量，當寬度設置爲100%時，容器溢出視口的右側。我怎樣才能防止它做到這一點。

你可以從這個小提琴看到例如：http://jsfiddle.net/spryno724/BHr5F/2/

注：我知道我可以使用calc()函數來完成這個任務，但鑑於its current browser support，和我的觀衆，我還沒準備好依靠關於這個功能。

來源

2013-08-21 Oliver Spryn

我沒有得到它，你能解釋一下？ –

@HashemQolami看一下JSFiddle鏈接，你可以在結果窗口看到你必須向右滾動才能看到所有的內容。這是因爲'margin-left：15px'和'width：100％'。我正在嘗試將這些內容放在窗口中。 –

最簡單的方法是使用填充左的.row容器，而不是保證金，留在內容可以在我更新的jsfiddle可以看出：

div.row { 
    background-color: rgba(51, 51, 51, 0.9); 
    display: table-row; 
    padding-left: 15px; 
}

http://jsfiddle.net/BHr5F/4/

來源

2013-08-21 21:04:38 Dragony

我試過了。您可以看到邊欄左側的填充現在不見了。 –

Here有一個很多很好的答案。我最喜歡的是：

.container { 
    width:90%; 
    margin: auto; 
}

來源

2013-08-21 21:05:37 Joram

添加padding-left: 15px到body元素並從section.container保證金：

body { 
    margin: 0; 
    padding-left: 15px; 
} 

section.container { 
    border: 1px solid black; 
    display: table; 
    max-width: 100%; 
    overflow: hidden; 
    table-layout: auto; 
    width: 100%; 
}

JSFiddle Demo #1

您還可以使用box-sizing: border-box;計算寬度屬性包括填充和邊界。並刪除水平滾動條：

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

JSFiddle Demo #2

來源

2013-08-21 21:29:57

CSS顯示錶格寬度溢出

回答

相關問題