兩張浮動圖像之間的DIV尺寸不正確

我需要使用由設計人員創建的自定義圖像創建一個對話框。爲了討論的目的，這是我的應用程序的正確答案。對話框必須能夠承受寬度和高度的變化。這對桌子很容易做到，但我想維護一個無桌子的設計，所以我想我可以使用3排DIV來做到這一點。例如，將圖像浮動到左側，將圖像浮動到右側，然後在其間放置DIV，然後將圖像設置爲背景，以便可以在其上輸入文本。兩張浮動圖像之間的DIV尺寸不正確

這裏是我的失敗嘗試這樣做的演示：（只顯示一行） http://www.seaburydesign.com/rounded/demo.html

正如你所看到的，這幾乎工作。但是，中間的DIV只是它內部的大小，儘管我已經設置了高度和寬度。我需要保持寬度靈活。

有關如何解決此問題的任何想法？

來源

2012-02-24 Todd Davis

除非你打算讓這個URI在未來十年左右工作，否則你可以嘗試隔離代碼並使用一個pastebin來發布它，以便將來的讀者可以按照這個問題並給出答案。 – kontur 2012-02-24 21:35:59

如果您將圖像的圓角設爲白色而不是透明，則可以將背景圖像應用於標題標記而不是中間的div。這會產生這樣的印象，即中間div與這兩個圖像具有相同的高度。

更新

如果可能的話（這取決於您的瀏覽器需要支持），你可以做圓角與CSS3的邊界半徑屬性，而不是使用的圖像。這將是這樣的：

header { 
    -webkit-border-top-left-radius: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
}

你也可以試試這個border-radius CSS-generator找到最適合你的屬性。

來源

2012-02-24 21:37:34

不幸的是，這將在各種地方，如漸變和圖像，我不能使角落變白。是的，這會有很大的幫助。 – 2012-02-24 22:07:56

@ToddDavis用另一種解決方案更新了我的答案。不知道它是否適用於這種情況（取決於您需要使用圓角支持哪些瀏覽器）。 – 2012-02-24 22:25:39

謝謝。我更喜歡CSS圓角，但本例中的設計師設計了一些我需要使用的自定義邊框。另外它需要IE6的支持。周圍沒什麼好玩的，但是你去吧。 – 2012-02-24 22:40:37

您的容器中的css display: inlinediv的空白任何設置爲width。使用display: block; float: left; margin: 0 XXpx;作爲您的div（XX是兩側圖像的寬度）。

編輯：具體，這將是：

div#yourdiv { 
    background-image: url("images/module_header_bg.jpg"); 
    color: white; 
    display: block; 
    float: left; 
    font-weight: bold; 
    height: 42px; 
    width: auto; 
}

和都的img標籤

img { 
    float: left; 
}

這爲您的內容創建一個動態大小的盒子，或者你設置的div寬度如width: 300px而不是width: auto。

來源

2012-02-24 21:40:30 kontur

刪除內聯（從之前的嘗試，以使其工作，感謝捕捉），修復了高度等問題的大小問題。浮動左邊幫助，如果我刪除寬度：100％。然而寬度繼續破壞佈局。我嘗試使用正值和負值設置左右兩側的邊距，但似乎仍在繼續運行。我會盡快重新上傳結果。 – 2012-02-24 22:10:33

查看我的具體代碼更新。 – kontur 2012-02-25 13:22:41

刪除下面的行：

顯示：內聯;

除了在這種情況下無用（因爲浮動內聯行爲已經工作），「內聯」屬性不允許您設置元素的寬度或高度。爲了更清楚地理解，請閱讀w3c's article。

來源

2012-02-24 21:43:46

謝謝 - 顯示內聯已被刪除，並修復了高度。但寬度仍然是一個問題。 – 2012-02-24 22:13:16

兩張浮動圖像之間的DIV尺寸不正確

回答

相關問題