css-float | 易学教程

CSS layout problems, floats, nested divs

阅读更多关于 CSS layout problems, floats, nested divs

问题 Alright, I have received some helpful information on this personal site I am working on already. Somewhere in my jumbled mess of nested divs I have created some problems for myself. I have floated both that image and the text next to it inside another div and centered that div, which is fine. But in order to start a new paragraph below it, I must put that paragraph within a div because the floats above it need to be cleared(or it displays the text in that right margin next to the div). I am

Why doesn't a fixed-width element take up the space beside a floated element?

阅读更多关于 Why doesn't a fixed-width element take up the space beside a floated element?

问题 In this CodePen, the <aside> element wraps the <article> element. But if you apply a width to the <aside> element (i.e. uncomment width: 50px; ), the <aside> jumps to a new row, even though there is enough space to sit alongside the <article> element. Why doesn't the element sit alongside a floated <article> when space is available? section { width: 800px; } article { float: left; width: 500px; background: #ffffcc; } aside { /* width: 50px; */ background: #ccffcc; } <body> <section> <article>

CSS: Why don't these two div (or span) elements float next to each other

阅读更多关于 CSS: Why don't these two div (or span) elements float next to each other

问题 In the following code, I need the div elements #ldiv and #rdiv to be placed next to each other. So I am using the CSS float property. I looked up this answer, and I think I am following it, but still the div's won't position next to each other. The second div displays in the next line. Then I thought that div is a block level element, so I replaced the div by span elements. But that did not help either. JSFiddle here. <div style="padding:25px; width:400px;"> <div style="background-color:

jQuery masonry leaving gap

阅读更多关于 jQuery masonry leaving gap

问题 I'm attempting to use jQuery Masonry in a project and it's not working properly: there's a gap in the top-right corner of the grid. I've tried adjusting the grid width and margins, which results in either one block per row or all blocks being run together (but still with a gap topright.) It doesn't actually look like the blocks are being rearranged at all, though Masonry is applying its class and assigning absolute positioning to the elements as expected. I was convinced that I was doing

CSS Vertical Float Technique

阅读更多关于 CSS Vertical Float Technique

问题 Is it possible to have a vertical float working by analogy with the horizontal one? In the Html below I'd like the green button to be as it is and the yellow to float to the bottom beyond gray shape edge. <!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"> <body> <table style="margin: 250px; width:50px; height: 100px; background-color: #ccc; table-layout: fixed;"> <tr> <td style=

Setting text-overflow ellipsis for a float left div or list

阅读更多关于 Setting text-overflow ellipsis for a float left div or list

问题 Here's what I'd like to do: Create a list that only takes up as much room (horizontally) as needed (i.e. as the longest list element. When the list doesn't fit on the page, trim the list text and show an ellipsis. I use a combination of white-space:nowrap and text-overflow:ellipsis . It works fine for a normal list, but in that case the list takes up the full width of the page. To force it to only take as much space as needed I applied a float:left , but this breaks the text-overflow. Example

floated element being pushed down by previous element

阅读更多关于 floated element being pushed down by previous element

问题 http://jsfiddle.net/4gw8wank/ I have 3 container as part of a responsive page. In the mobile view they must display in the order- blue, red, green, stacked on top of each other like so.. <div class="blue"></div> <div class="red"></div> <div class="green"></div> which is fine, but in a desktop experience, using the same markup, they must display as shown in the fiddle above, i.e. with the blue and green containers to the right, with a fixed width, and the red container to the left, whereby the

CSS - Float to max width

阅读更多关于 CSS - Float to max width

问题 So I am making a row of items in a semi elastic container. There is a profile image on the left, and then content floated to the right of it (both float left). What I am trying to do is make the content float be max possible width instead of min possible width (as floating causes). CSS: #container { max-width: 800px; min-width: 500px; } .profile { float: left; width: 100px; } .info { float: left: min-width: 400px; max-width: 700px; } HTML: <div id="container"> <div class="profile"> IMG </div>

Textbox to fill space

阅读更多关于 Textbox to fill space

问题 Consider the following. 2 DIVS - the left one of known width, the right one of unknown width. We can make the right-hand side fill the remaining space, however if I exchange the right-hand DIV to a textbox, it then does not fill the space, but wraps below the left-hand div. Here's a fiddle: example <div> <div id="left"> left </div> <input type="textbox" id="right"> right </input> </div> #left { float:left; width:180px; background-color:#ff0000; } #right { width: 100%; background-color:#00FF00

Responsive CSS / Inline divs

阅读更多关于 Responsive CSS / Inline divs

问题 I am trying to use CSS to put a 100% width div across the page and then under that div 2 div s inline that are 50% each each 10px padding on all the div s and then as the page gets smaller make the two 50% div s change to 100% here is what i have so far: <style type="text/css"> body,html { margin:0; padding:0; } .outer { width:100%; } .topblock { width:100%; padding:10px; border:1px solid black; } .block1 { width:48%; padding:1%; float:left; display:inline; border:1px solid black; } .block2 {