css-float

问题 How do i keep two elements in the same row with fixed right column? I want right div to be with fixed size, and left column fluid, but when in insert long text to left one, then right one goes to the next column.. Example: http://jsfiddle.net/Jbbxk/2/ Is there any pure CSS solutions? NB! Wrap div must have dynamic width! For demostration purposes it has fixed witdh, so it will wrap. Cheers! 回答1: This is one common way of doing what you want: .wrap { position: relative; margin: 5px; border:

问题 I know similar questions have been asked before but I haven't seen one where the parent div has an unknown width with a definitive answer. So here's the situation. <style> .parent { width: 100%; } .child { width: 300px; float: left; } </style> <div class="parent> <div class="child></div> <div class="child></div> <div class="child></div> <div class="child></div> <div class="child></div> <div class="child></div> ... <div class="child></div> <div> Basically, I want to fit as many child divs in

问题 I've got a long div container set to display:table and & divs within it set to display:table-cell; vertical-align: middle . I'm really happy with the results of vertical alignment, but: I don't know the width of these 3 divs, I want one of them to be on the very right side of div container (minus padding of course), float: right doesn't work with display: table-cell . Here's an example (I want to float the golden divs to the right). I can't use JS. I need it to work in IE7+, or IE8+ if

问题 I have floated articles side by side that are 25% wide. I'm adding a clear:both after every fourth element. However I need to insert a graphical section-break inbetween the elements. And it has to be inside the <ul> . To be valid I wrapped the "section-break" (the first li item in the sample underneath) into a <li> as well. <ul> <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li> <li>This is a article and only 25% wide</li> <li>This is a article and only 25% wide</li> <li

问题 i am trying to make a grid in such a way that it is always the same size overall (800x600). however, i do not want all squares in a grid to be of the same size. as you can see as soon as i make one square bigger (2x2+gap - colored silver in the image) all the rest of the smaller squares do not realign and start from the start of the next row - creating a WHITE gap in row two. is there a way to fix this? here is the CSS for them: .squareTEST1, .squareTEST2 { width: 60px; height: 60px; margin:

问题 I was making a basic commenting system. It's perfect when the comment is short, but when the user writes a lot, comment is not as fancy as it should be... I've tried to fill the space with height: 100%; but it doesn't work as I expected. I wanted the author info to fill in height to the comment. What I've tried so far: http://jsfiddle.net/anWVC/3/ HTML: <div class='comment'> <div class="f-left"> <small style="font-size: .8em;">23:44 - 10/12/2011</small> <img src='http://comenzarjuego.com/wp

问题 As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 6 years ago . How do I add padding to a float:right item without having it to mess up everything? Isn't padding supposed to work on the inside not

问题 As I try to solve the problem that led to this my unsolved unsolved question, I decided to bring up the Green DIV to the front since the content doesn't bleed off of it. Structure Green paper: Main DIV.rack Orange and Gray paper: inserted via CSS :before and :after HTML <div class="rack"> Content </div><!-- End Rack --> CSS .rack { width: 70%; height: 100%; background: #7FAE68; margin: 155px 0 100px 0; position: relative; float: left; left: 15%; z-index: 9999; transform:rotate(1deg); -ms

问题 As I try to solve the problem that led to this my unsolved unsolved question, I decided to bring up the Green DIV to the front since the content doesn't bleed off of it. Structure Green paper: Main DIV.rack Orange and Gray paper: inserted via CSS :before and :after HTML <div class="rack"> Content </div><!-- End Rack --> CSS .rack { width: 70%; height: 100%; background: #7FAE68; margin: 155px 0 100px 0; position: relative; float: left; left: 15%; z-index: 9999; transform:rotate(1deg); -ms

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 3 months ago . I have one div in another div. The inner div has margins of 0, auto to centralize it. However, I can't get it to float to the bottom without making it absolute. Is there anyway of making a relative div float to the bottom of a normal div? 回答1: Without using position: absolute , you'd have to vertically align it