css-float | 易学教程

why is one of two floated divs are pushed to the next line?

阅读更多关于 why is one of two floated divs are pushed to the next line?

问题 I have two divs which I want to place in one line, the first one with a fixed width and the second without a set width. If I try to set both to float:left, the second div would go to the the next line if it contains too many words. But if the second one is a non-floated one, it stays in the same line with the first div. Why? .left { float: left; width: 250px; height: 300px; background-color: red; } .right { /*if set to float:left, it might goes the next line*/ /*float: left;*/ height: 300px;

Floated div not taking full width

阅读更多关于 Floated div not taking full width

问题 Why do floated divs don't take full width? Aren't they still block elements? Here is an example http://jsfiddle.net/GKjC8/ html <div id="a">a</div> <div id="b">b</div> css div { background-color:cyan; } #a { float:left; } #b { clear:left; } The a div looks like it's inline since it takes as much space as its content. Can someone explain? 回答1: You have to set width: #a { float: left; width: 100%; } “You should always set a width on floated items (except if applied directly to an image – which

Height of one div moving another for unknown reason?

阅读更多关于 Height of one div moving another for unknown reason?

问题 I can't seem to figure this out. I have my web development portfolio setup at http://www.codeisdna.com. The site is 70% complete. I have a problem though. If you click on one of the projects, a div is expanded to reveal the full thing (a description on the left, a preview on the right in the form of a Macbook screen). On some of the other tabs the Macbook shifts. It happens when the description box has a certain height from the text. Can anyone aid me in finding the solution? I seem to have

Prevent float wrap until elements have reached min-width

阅读更多关于 Prevent float wrap until elements have reached min-width

问题 I have variable-width HTML layout with a fixed-width menu to the left of a content <div> of variable width (set by css max-width and min-width). For very narrow browser windows I would like the content to wrap beneath the menu, and I am currently achieving this by setting float:left on both menu and content. <html> <head> <title></title> </head> <body> <div style="width: 200px; float: left; border: 1px black solid">Menu (200px wide)</div> <div style="max-width: 800px; min-width: 300px; float

Is there a CSS only solution to make divs equal height in a vertical grid?

阅读更多关于 Is there a CSS only solution to make divs equal height in a vertical grid?

问题 I have a .parent div and within that I have an unknown number of .child divs. I need the child divs to be in a vertical grid and all of them need to be equal height. Unfortunately, I can't use javascript for this. I have tried different combinations of display: inline-block and float: left , but I can't get the children to be the same height. I am able to achieve same height using display: table-cell but then I run into another problem that the children don't split onto multiple lines if the

Special 'Float' in Mosaic of Boxes

阅读更多关于 Special 'Float' in Mosaic of Boxes

问题 I'm working with a mosaic (jsFiddle) made with simple CSS and HTML. The mosaic has rows and columns of the same width and height. Each one of its cells should be filled by an entire box or a part of it. In other words, every box should occupy one or more boxes length-wise and one or more boxes width-wise. When all the boxes take up only one row, everything works fine. However, when I try to make a box bigger than a row, the float:left stops working the way I want it to: http://img198

H1 on the left, “buttons” on the right, vertically aligned

阅读更多关于 H1 on the left, “buttons” on the right, vertically aligned

问题 I'm trying to display on one line: a H1 element aligned to the left of the containing box several "buttons" (A elements here) aligned to the right of the containing box all being on the same baseline Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc. <div id="block1"> <h1>What a great title</h1> <a href="javascript:void(0)">This link can kill you</a> <a href="javascript:void(0)">Click if you dare

How can i position a dropdown at cursor position inside a textarea?

阅读更多关于 How can i position a dropdown at cursor position inside a textarea?

问题 How can i position my dropdown at cursor position inside a textarea? I have found this question was already asked here many times but i cant able figure out the correct solution .. this is the JSBIN please help me with your suggestions Thanks in advance 回答1: I know it isn't an exact answer on the question (this solution doesn't use a textarea, but a contentEditable div), but I don't think there is any way of getting x-y-coordinates using either the event, an attribute or function on the

Converting absolute layout to use floats

阅读更多关于 Converting absolute layout to use floats

问题 I’m looking for some advice on a project I am working on and would be appreciative of any assistance. Aim: To make a drag and drop CMS which allows a user to draw elements on a grid and move them into the desired position. The changes are recorded in JSON format and converted into HTML/CSS when the user presses a publish button. The resultant HTML should be clean and flexible (i.e. cater for content that will vary in height/length). The system should be able to handle creating e-Commerce

CSS Block float left

阅读更多关于 CSS Block float left

问题 I have this html file <div class="con" style="width:100px;height:200px;"> 1 </div> <div class="con" style="width:100px;height:200px;"> 2 </div> <div class="con" style="width:100px;height:400px;"> 3 </div> <div class="con" style="width:100px;height:400px;"> 4 </div> <div class="con" style="width:100px;height:100px;"> 5 </div> <div class="con" style="width:100px;height:100px;"> 6 </div> <div class="con" style="width:100px;height:100px;"> 7 </div> <div class="con" style="width:100px;height:100px