css-float | 易学教程

z-indexing floating divs

阅读更多关于 z-indexing floating divs

问题 I have two divs float:left. I z-index the first div to be above, but it doesn't work. Is this because floated elements are not positioned? <html> <style> #wrap{ background:#666; } #menu, #thumbs{ float:left; } #menu{ background:#06C; z-index:10; } #thumbs{ background:#0CF; margin-left:-20px; } </style> </head> <body> <div id="wrap"> <div id="menu"> <p>menu</p> </div> <div id="thumbs"> <p>thumbs</p> </div> </div> </body> </html> 回答1: You need to set the position property. Adding position

How to keep floated div from moving beneath other floated div when the browser width resizes?

阅读更多关于 How to keep floated div from moving beneath other floated div when the browser width resizes?

问题 I'm having a problem where a floated div moves beneath another floated div when the browser width resizes. I created an example of this behavior in a jsfiddle (below) in which I use dummy text and a dummy table. If you open the jsfiddle, and resize the width of the display area, you'll see that eventually the right hand div (the table) moves beneath the left hand div (the text). https://jsfiddle.net/p7yr5t4u/23/ .view { float: left; position: relative; height: 100%; } #A { width: 200px; }

Why does my float elements not working properly at 40% + 60% width settings?

阅读更多关于 Why does my float elements not working properly at 40% + 60% width settings?

问题 I have the following CSS and HTML set: html, body{ margin: 0; } header{ border: 1px solid green; background-color: green; height: 50px; } nav{ border: 1px solid red; background-color: red; height: 50px; } aside{ border: 1px solid yellow; background-color: yellow; height: 50px; width: 40%; float: left; } section{ border: 1px solid blue; background-color: blue; height: 50px; width: 60%; float: right; } <body> <header> </header> <nav> </nav> <aside> </aside> <section> </section> </body> But I'm

Why can't I clear float when using BFC feature on body?

阅读更多关于 Why can't I clear float when using BFC feature on body?

问题 On other tags, using BFC can clear the float, why the body is not available. As expected, add overflow: hidden on the body to form a BFC, which can achieve the effect of clearing the float, but this is not the case? div.f { float: left; width: 100px; height: 100px; background: red; margin-right: 1px; } body { overflow: hidden; border: 1px dashed skyblue; } .p { overflow: hidden; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

Why can't I clear float when using BFC feature on body?

阅读更多关于 Why can't I clear float when using BFC feature on body?

HTML, overflow:scroll, and float

阅读更多关于 HTML, overflow:scroll, and float

问题 I have a div that encapsulates many unordered lists (ul). I have each ul set to "float:left". And I also have the parent div that contains them set to "overflow-x:scroll". What's happening is the ul's are wrapping when they hit the edge of the page and not staying side by side to take advantage of the scrolling property of the parent div (the scroll bars are there). Why? How can I fix this? Thanks for any help. 回答1: you need to insert those uls in another div, to which you'll give width=

CSS Floating with Overlap

阅读更多关于 CSS Floating with Overlap

问题 I'm trying to set up a simple horizontal tab structure for a page I'm working on, and I'm running into some trouble with floating div's combined with z-index. Viewing the following code in a browser: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css

CSS Floating with Overlap

阅读更多关于 CSS Floating with Overlap

How to float elements left or right of a horizontally centered element?

阅读更多关于 How to float elements left or right of a horizontally centered element?

问题 For the pagination I'd like to use a horizontal alignment of elements looking like this: |<first page> | <previous page> | page X of N | <next page> | <last page>| The element page X of N should always stay in the middle of the whole line, even if one of the other elements is missing . E.g. |<first page> | <previous page> | page N of N | The floating elements should always be attached directly to the element in the centre. My approach looks like this (last row of a search results table): <tr

How to float elements left or right of a horizontally centered element?

阅读更多关于 How to float elements left or right of a horizontally centered element?