兩列和一個頁腳使用css分割的邊界（單邊）

我想創建一個強大的css樣式，它可以運行幾乎所有的瀏覽器（包括IE7，firefox 3），它們顯示兩列和一個頁腳除以點邊境。我試圖執行下面的代碼，，但我有一個問題：當我應用邊界右風格：虛線;向左類 A和B不在同一水平面。請halp我修復CSS樣式。兩列和一個頁腳使用css分割的邊界（單邊）

Click here for the current example。

HTML

<div class="container"> 
    <div clas="left">A</div> 
    <div class="right">B</div> 
    <div class="footer">C</div> 
</div>

CSS

div.container { 
    background:#eee; 
    margin: 0 auto; 
    width: 750px; 
} 
.left{ 
    background:#ddd; 
    float: left; 
    width: 50%; 
    border-right-style:dotted; 
} 
.right { 
    background:#eee; 
    float: right; 
    width: 50%; 
} 
.footer { 
    background: none repeat scroll 0 0 #eef; 
    clear: both; 
    border-top-style:dotted; 
}

來源

2011-09-16 antonjs

您遇到的問題是該元素的邊框不包含在該元素的定義寬度內;所以元素是其父寬度的50％，但是邊框添加了額外的寬度。

如果減少元素的寬度，例如，48％的話，似乎工作，只要你願意：

div.container { 
    background:#eee; 
    margin: 0 auto; 
    width: 750px; 
} 
.left{ 
    background:#ddd; 
    float: left; 
    width: 48%; 
    border-right-style:dotted; 
} 
.right { 
    background:#eee; 
    float: right; 
    width: 48%; 
}

JS Fiddle demo。

編輯與更新，

你可以，Firefox和鉻（FF5.x和12.x的鉻在Ubuntu 11.04）使用方法：

div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; /* Left this in, but it doesn't seem to work... */ 
}

JS Fiddle demo。

它將邊框寬度合併到元素的寬度中;用這種方法你可以保留width: 50%;的元素和邊框會自行排列。不幸的是，它不適用於Opera或者大概是IE。

來源

2011-09-16 10:32:09

固定

http://jsfiddle.net/euYTQ/19/

你有什麼要記住的是，的％A邊界數+分配。

所以說你有一個100像素寬（100％）的盒子，你把一個邊框放在1px邊框（1％）上，那實際上是101％。所以在你的情況下，它正在打破下一行的空間，因此給你錯誤。

在我的修復中，我只是將正確的容器設置爲49％。這對流體解決方案來說很好，或者如果你有一個固定的佈局，將其設置爲固定值。

請記住，填充也是一樣的......它會計算指定大小或百分比的+。

希望這會有所幫助！

來源

2011-09-16 10:31:31

問題是邊框將寬度增加到div與.left。作爲div出現的容器是固定寬度的，你可以簡單地給固定寬度值太.left和.right元素（或減少其百分比寬度），使.left略窄：

.left{ 
    background:#ddd; 
    float: left; 
    width: 372px; 
    border-right-style:dotted; 
} 
.right { 
    background:#eee; 
    float: right; 
    width: 375px; 
}

這裏是一個updated fiddle。我還建議您閱讀box model以瞭解邊界，填充等如何增加寬度。

來源

2011-09-16 10:31:39

支持我不會說這就是AntonJs在尋找的東西，因爲他們使用％不是固定的計量單位 –

@Alistair - 由於容器'div'的寬度是固定的，我認爲這可能是可以接受的。我也提到了他可以簡單地降低百分比寬度的事實。 –

對不起，你安靜的容器確實有一個固定的寬度，你確實提到了百分比。 [已經很長一週了] –

http://jsfiddle.net/euYTQ/18/

50％和50％= 100％所以沒有爲邊界的空間。

來源

2011-09-16 10:31:49

A和B在不同層次上的原因是因爲它們不適合一個寬度。你有他們每個宣佈width: 50%但其中一個也有一個邊界。邊框寬度添加到div的寬度 - 因此兩個div加邊框不適合水平間距。

例如，嘗試將width: 49%放在它們中的每一個上 - 您將看到不同之處。這並不理想，因爲您並不總是知道視口的寬度。如果你可以使用精確的像素寬度，它會更容易。試試這個CSS一變：

div.container { 
    background:#eee; 
    margin: 0 auto; 
    width: 750px; 
} 
.left{ 
    background:#ddd; 
    float: left; 
    width: 374px; 
    border-right:dotted 2px black; 
} 
.right { 
    background:#eee; 
    float: right; 
    width: 374px; 
} 
.footer { 
    background: none repeat scroll 0 0 #eef; 
    clear: both; 
    border-top-style:dotted; 
}

來源

2011-09-16 10:32:20

把你的DIV權在div左

<div class="left">section left 
     <div class="right">section right</div> 
    </div>

，改變一點點的CSS

.left{ 
    background:#ddd; 
    float: left; 
    width: 50%;  
} 
.right { 
    background:#eee; 
    float: right; 
    border-left-style:dotted; 
}

例子：http://jsfiddle.net/euYTQ/28/

來源

2011-09-16 10:34:32

這是因爲50% + 50% + 1px（the bord呃）高於100%。如果你的.container不會改變寬度，你可以給它們一個固定的像素值。

但是，如果你.container會改變寬度的，你可以嘗試添加單獨包含邊界，像這樣的另一個元素：

.border { 
    height:100%; 
    width:0; 
    border-left:3px dotted #000; 
    position:absolute; 
    left:50%; 
    top:0; 
}

不要忘了給.container一個position:relative;。

來源

2011-09-16 10:38:06 Kokos

@Antojs; padding & border如果元素以百分比形式出現問題，則將寬度添加到元素。所以;可以以一個這樣給寬度：

div.container { 
    background:#eee; 
    margin: 0 auto; 
    width: 750px; 
} 
.left{ 
    background:#ddd; 
    float: left; 
    width: 50%; 
    border-right-style:dotted; 
} 
.right { 
    background:#eee; 
    overflow:hidden; 
}

現在.right如果你給border & padding它不會影響任何東西&你也可以使用CSS3 box-sizing: border-box;但它不是由IE7

檢查此琴http://jsfiddle.net/euYTQ/30/

來源

2011-09-16 10:42:27 sandeep

兩列和一個頁腳使用css分割的邊界（單邊）

回答

相關問題