居中第二個浮動：float左邊的div標籤

基本上這是我的網站看起來像這樣：https://jsfiddle.net/9vugv3n5/ 現在我想設置'中間'div在頁面的中心和'左'一個是留給它作爲'正確的'一個會自動適合中間的一個。哇，這聽起來很混亂，但我希望你明白。居中第二個浮動：float左邊的div標籤

#wrapper { 
height: 100%; 
position: absolute; 
width: 100%; 
z-index: 0; 
} 

#Home, #About, #Gallery, #Literature, #Contact { 
text-align: center; 
color: #222222; 
font-family: 'source-sans'; 
height: calc(100% - 50px); 
padding-top: 50px; 
} 


#Home { 
background-color: #ccf0fa; 
} 

#About { 
background-color: #c4f9de; 
width: 300%; 
} 

#Gallery { 
background-color: #dfcbff; 
} 

#Literature { 
background-color: #fed5c8; 
} 

#Contact { 
background-color: #fdecc8; 
} 


#left, #middle, #right { 
width: 33.3333%; 
float: left; 
height: 100%; 
padding-top: 50px; 
} 

#left { 
    background-color: #000000; 
} 


#middle { 
    background-color: #777777; 
} 

#right { 
    background-color: #FFFFFF; 
}

屆時，除了我會分裂「中間」成兩個div，並使其爲我點擊右側，它向右滾動和模擬向左

編輯：確定我看到我沒有解釋我的問題很好，所以我決定提請一點草圖描述正是我想要的

http://s23.postimg.org/498qrzw63/left_middle_right.jpg

希望這是更清晰一點，現在

來源

2015-06-29 Jesus Christ

請寫更多關於您的問題或重新描述它 –

我編輯後的瀏覽器屏幕的寬度現在，所以也許它更清晰現在 –

好吧，我設法做到這一點，但現在我的滾動到固定navbar的jquery代碼不是加工。

https://jsfiddle.net/9vugv3n5/3/

var elementPosition = $('#header_nav').offset(); 

$(window).scroll(function() { 
if ($(window).scrollTop() > elementPosition.top) { 
     $('#header_nav').css('position', 'fixed').css('top', '0'); 
    } else { 
     $('#header_nav').css('position', 'static'); 
    }  
});

來源

2015-06-29 12:35:07

不要放棄寬度：300％;大概。讓它100％。它會工作。

#About { 
    background-color: #c4f9de; 
    width: 100%; 
}

「ID」應該是唯一的。按照jsfiddle的例子，你已經使用#About兩次。

來源

2015-06-29 10:57:22 jrath

我想打左，右和中間的100％，我沒有在html中多用一次。我不知道我是否得到了錯誤 –

根據你的代碼，你已經向父母提供了300％的寬度，即部分＃關於。所以孩子divs，即div＃middle，div＃left，div＃right佔寬度爲300％的33.33％。如果從左向右滾動，您會發現確切的問題。所以，如果您將節＃的寬度更改爲100％。它會爲你工作。 – jrath

對不起，但我不認爲這是我的問題的解決方案，也許你並沒有因爲我的糟糕解釋而不能很好地展示我想要實現的目標，但我現在編輯了這篇文章，並提供了一個imo提供的小圖片更好地描述我想要的東西:) –

我建議看一下彈性盒。我沒有深入地看過你的代碼，但是，你描述的問題應該可以通過使用彈性框來解決。

來源

2015-06-29 11:25:07

居中第二個浮動：float左邊的div標籤

回答

相關問題