CSS div的放置

首先，請參考以下圖片： enter image description here CSS div的放置

這基本上是我的佈局思路。

我要的是：

內容的div是「重點」，例如，當瀏覽器調整，應該有種留在中間;
當瀏覽器正在調整大小時，我希望這兩個圖像基本上落在內容div下方。（不完全確定如何解釋這個，但我希望你明白）;
它可能（而且會發生）瀏覽器比 1400px（200 + 1000 + 200）更寬，在這種情況下，我希望左邊的圖像儘可能地位於左邊，右邊的是相同的圖片儘可能地貼在右邊;
我也不希望在瀏覽器被調整大小時調整時顯示sidescrollbar。（或者說，寬度小於1400px）。

這些都是我現在可以從頭腦中想到的所有要求。

我一直在尋找css的東西，並在css中使用各種方法搞了一段時間，但從來沒有得到我想要的效果。我已經非常接近解決方案的幾次，但不會錯過單個CSS元素或其他任何東西。嘗試使用z-index，float和其他一些東西。

有人能幫我嗎？

在此先感謝。代碼

例子：

CSS：

#backgroundimages { 
    overflow:hidden; 
    height: 1000px; 
} 

#imageleft{ 
    float:left; 
    background: url(homebg.png); 
    height: 1000px; 
    width: 445px; 
} 


#imageright{ 
    background: url(homebg2.png); 
    float:right; 
    height: 1000px; 
    width: 445px; 
} 


#middlecontent { 
    float:left; 
    overflow:visible; 
    height: 1000px; 
    width: 1000px; 
    margin-left: auto; 
    background-color: red; 
}

HTML：

<div id="backgroundimages"> 
    <div id="imageleft"></div> 
    <div id="middlecontent"></div> 
    <div id="imageright"></div> 
</div>

這一點，例如，看起來相當接近我想要完成，但首先的內容div不居中，每當我調整大小時，它仍然將焦點放在左側的圖像上。

來源

2013-05-17 Tienus McVinger

你想給我們一個你一直在努力的代碼的例子，可能幾乎有結果嗎？ – Doug

我認爲你要找的詞是「迴應」。調整爲正在查看的屏幕寬度的模板。有幾個方法可以實現這個結果，我可以想到，一個使用javascript（例如jQuery）和CSS，另一個使用CSS媒體查詢。試着用谷歌搜索這些短語中的一些，看看你找到了什麼。 – Doug

對不起，我的代碼添加了一段時間。我在這裏格式化失敗。上面的例子看起來非常接近我想要的，但它並不按照我想要的方式工作。我也有點理解它爲什麼沒有，但我不知道如何解決它。另外，谷歌應該谷歌你提到的一些東西。謝謝。 –

以下是我將如何做到這一點...我不是說這是最好的解決方案。我覺得CSS媒體查詢還沒有得到很好的支持，所以我把這一小塊jQuery放在一起幫助我... http://jsfiddle.net/ZdR8P/

順便說一句，我不是最好的jQuery程序員，所以有可能會更好達到相同結果的方式（來自更好的jQuery程序員的反饋總是歡迎！）

這裏的HTML

<body> 
    <div id="one">Content in here</div> 
    <div id="two">Content in here</div> 
    <div id="three">Content in here</div> 
</body>

jQuery的

$(document).ready(function(){ 

var reportWidth = true; 

if (reportWidth){ 
    $('body').append('<div id="reportWidth">'); 
    $('#reportWidth').css({ 
     position:'fixed', 
     bottom:0, 
     left:0, 
     right:0, 
     backgroundColor:'#666666', 
     color:'#ffffff' 
    }) 
} 

    var breakpoint=new Array(); 
    breakpoint.push(320); // iPhone 4 & 5 in portrait 
    breakpoint.push(480); // iPhone 4 in landscape 
    breakpoint.push(568); // iPhone 5 in landscape 
    breakpoint.push(768); // iPad in portrait 
    detectViewportWidth(breakpoint,reportWidth); 
    $(window).resize(function(){ 
    detectViewportWidth(breakpoint,reportWidth) 
    }); 
}); 

function detectViewportWidth(breakpoint,reportWidth){ 
    var htmlClassPrefix='pageWidth-'; 
    var currentWidth=$(window).width(); 
    var noBreakpoints=breakpoint.length; 
    var widthClass=noBreakpoints+'-'+(noBreakpoints+1); 
    $('html').removeClass(htmlClassPrefix+widthClass); 
    var previousArrayVal=0; 
    $.each(breakpoint,function(arrayKey,arrayVal){ 
     $('html').removeClass(htmlClassPrefix+arrayKey+'-'+(arrayKey+1)); 
     if (currentWidth<=arrayVal && currentWidth>previousArrayVal){ 
      widthClass=arrayKey+'-'+(arrayKey+1); 
     } 
     previousArrayVal=arrayVal; 
    }); 
    $('html').addClass(htmlClassPrefix+widthClass); 
    if (reportWidth){ 
     $('#reportWidth').text(htmlClassPrefix+widthClass); 
    } 
}

和CSS：

div { 
    border:1px solid #999999; 
    display:inline-block; 
    width: 29%; 
    margin: 0 1%; 
} 
.pageWidth-0-1 div, 
.pageWidth-1-2 div 
{ 
    display:block; 
    width:98%; 
}

基本上它是檢測視有多寬應用類沿着.pageWidth-2-3的行標記到body標籤。如果更改窗格的大小，則會看到底部的小狀態欄會相應更改。 .pageWidth-0-1是最窄的，而.pageWidt-4-5是最寬的（但對jQuery中可以設置多少個分區或「斷點」沒有理論限制）。

然後，在您的CSS中，您設置了默認佈局 - 您可能希望默認佈局爲普通三列布局，如我在小提琴中所展示的 - 這假設大部分訪問者將在正常的顯示器...例如。

然後，您可以爲視口變小時定義特定的樣式行爲。希望你可以看到，在我的CSS中，我設置了一個基本的三列布局，當pageWidth是.pageWidth-0-1或.pageWidth-1-2時，當div變爲full width和block時，覆蓋。

嘗試更改小提琴中窗格的寬度，當它變得足夠窄時，您應該看到div落入垂直列。

希望這可以給你一個出發點？

來源

2013-05-17 09:56:56 Doug

只需添加...我感謝這不會完全回答您的整個問題。我還沒有測試過你的CSS，但通過快速檢查，它看起來不錯。我認爲你的CSS技巧可能足以獲得你之後的初始佈局 - 你可以使用這個答案來幫助你把它變成一個響應式佈局。總體思路是在頁面變得太小時開始移除元素的浮動和寬度。 HTH – Doug

[所有的移動瀏覽器都支持媒體查詢]（http://caniuse.com/#feat=css-mediaqueries），儘管答案非常有趣，但真正有趣的替代。 – Xareyo

非常真實，@YaMo，但我更多地指的是在陳舊的15英寸顯示器上使用Internet Exploder 6或NutScrape（對不起，NetScape），1024或甚至800寬度......我們都知道有一些客戶仍然住在黑暗時代:) – Doug

回答

相關問題