將div放在圖像上 - 如何控制浮動行爲

我按照floating-div-over-an-image的指示操作，雖然工作正常，但我試圖更好地控制搜索框和按鈕的行爲。您可以看到我正在處理的頁面here 將div放在圖像上 - 如何控制浮動行爲

朝右上方的標題圖像上有一個搜索框。搜索框div的CSS如下

.search-box{ 
    z-index: 500; 
    width: 50%; 
    border: 0px none; 
    top: 0px; 
    float: right; 
    left: 40%; 
    position: absolute !important; 
}

您會看到搜索框右側有一個搜索按鈕。當瀏覽器窗口縮小時，即使右側有空間，該搜索按鈕也會跳到下面。我試圖強制該按鈕保持在正確的位置。

關於如何實現我描述的行爲的任何提示？我已經嘗試過上面CSS中的float屬性的變體，但是這並不能滿足我的需要。也許我沒有應用正確的CSS選擇器？

問候

來源

2015-09-04 Brian Huether

請提供在問題本身中重現問題所需的所有代碼。 –

檢查，我的答案在下面http://stackoverflow.com/a/32394161/2006386 –

#k2ModuleBox125的div有一個40％的寬度，這是造成搜索按鈕換行到下一行當大小的搜索欄增加。

您可以通過查看#k2ModuleBox125 div的樣式規則來輕鬆修復此問題。

來源

2015-09-04 08:49:25 lagboy

下面的修復程序似乎已經工作，但我會看到這是什麼，謝謝 –

只要改變你的.search-box CSS財產width:100%

據WORKING

.search-box { 
width:100%; 
}

讓我知道，如果它是有幫助的

來源

2015-09-04 09:06:13

發生這種情況，因爲.search盒有其寬度用％表示它的最小寬度，並把它放在右邊而不是左邊，你應該很好。

。search-box {
min-width：XXpx;
right：0;
left：auto;
}

來源

2015-09-04 09:06:56

在類（.search-box）中，寬度爲40％，因此沒有足夠的空間讓搜索框和按鈕顯示在一行中。你只需要替換下面的CSS，它將在所有分辨率下工作。

.search-box{ 


    border: 0 none; 
    position: absolute !important; 
    text-align: right; 
    width: 100%; 
    z-index: 500; 

}

來源

2015-09-04 09:44:42

謝謝，這是有效的。真正有用的是，當窗口變窄時，框的左邊緣會向左移動。就像我現在所擁有的（我指定了正確的：-30％來獲得我想要的位置），大部分情況都沒問題，但真正窄的寬度使搜索範圍超出標題圖像。再次感謝。 –

是的，它的工作，但給（右：10％）它會把頁面下方的滾動條。您需要替換下面的代碼，以刪除滾動條。搜索框{0} {0} {0} {0} {0} left：120px; 位置：絕對！重要; right：0; z-index：500; } –

也爲響應您可以添加此媒體查詢您的CSS文件@media屏幕和（最大寬度：767px）{。搜索框{左：0;} } –

將div放在圖像上 - 如何控制浮動行爲

回答

相關問題