css-float | 易学教程

inside div automatic fit width of li in ie

阅读更多关于 inside div automatic fit width of li in ie

问题 <div style='width:500px'> <ul> <li> some text in 1 line</li> <li> some text in 1 line</li> <li> some text 2 line</li> <li> some 2</li> <li> 2</li> </ul> </div> I don't know what is the correct css code for display of items in ie like: first two results automatic fit in first line and rest of the results on second line. so basic idea is to let the li get it's own width depending on the data size. Thanks in advance 回答1: I see two ways to achieve what I think you're asking: Option 1: Make the

Issue Getting Div to Hug up close to another

阅读更多关于 Issue Getting Div to Hug up close to another

问题 I have 6 Divs within a container Div. These divs have to be aligned a certain way for a clients needs. I've taken the basic layout for the customer website I'm working on and created a sample to be posted here. I have a regular CSS file and a mobile CSS file. When in mobile view the Divs will be aligned in sequential order 1-6. When in the regular view, Divs 1, 3, 4, and 5 will be aligned to the right. Divs 2 and 6 will be aligned to the left. I need div 6 to hug the bottom of div 2 with the

Inner div to have height 100% inside a container of height auto

阅读更多关于 Inner div to have height 100% inside a container of height auto

问题 I'm struggling to get a div to expand fully to it's container's height. Markup: <div class="container"> <div class="innerOne inner"></div> <div class="innerTwo inner"></div> </div> At different viewports .innerTwo 's content is taller than that of .innerOne 's but I would like it's background to be the same size as .innerTwo 's Styles: .container { width: 100%; height: auto; background-color: yellow; /* clearfix */ *zoom: 1; &:before, &:after { display: table; content: ""; line-height: 0; } &

Inner div to have height 100% inside a container of height auto

阅读更多关于 Inner div to have height 100% inside a container of height auto

position absolute gives parent no height

阅读更多关于 position absolute gives parent no height

问题 I have two div s in a parent div . They render side by side <image><info> but on smaller screens I want them to render one under the other and swap positions, like <info> <image> So, their real order in html is <info> <image> and they both have float:right so they appear swapped and side by side. On smaller screens they both have float:none and thet appear one under the other as they should. I used Shlomi's answer from here and it works fine. The problem. When horizontal, I wan to align the

Is there a more efficient way to center an image inside a floated div

阅读更多关于 Is there a more efficient way to center an image inside a floated div

问题 I was wondering if there was a more efficient way to center an image inside a floated div compared to mine. Right now I have it set up so the image is placed inside a p and I center the p. Seeing that extra p tag annoys me way too much :(. Is there anyway I can center the img by itself? Thanks! I listed what I have now down below. Edit: It needs to be vertical and horizontal! HTML <div class="filler"><p><img src="images/qualGraphic.png" width="578px" height="256.72px" alt="Quality"/></p></div

Floating parent div grows to hypothetical width of floating child div

阅读更多关于 Floating parent div grows to hypothetical width of floating child div

问题 I have a parent element that floats and a child element that also floats, plus some content to give the child element some dimensions, as follows: <div id="parent"> <div id="child"> WWWWWWW WWWWWWW WWWWWWW </div> </div> The child has its width restricted through width and min-width : #parent { width: auto; float: left; } #child { width: 16%; min-width: 150px; float: left; } What I would expect to happen is that the parent div has the same width as the child div, and not 100%, since it's

Cannot get float left/right to work for a div in Internet Explorer

阅读更多关于 Cannot get float left/right to work for a div in Internet Explorer

问题 Here is the html: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="styles.css"/> <title></title> </head> <body> <div align="center"> <div id="main-header-content" class="content"> <div class="left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

Right floated container results in line break

阅读更多关于 Right floated container results in line break

问题 i am currently fighting with floated elements again. please take a look at this jsfiddle: float-issue html { width: 100% } .container { /*width: 80%;*/ /*margin: auto;*/ border: 1px solid black; } .element { margin-left: 10px; margin-right: 10px; background-color: purple; float: left; } <div class="container" style="float: right"> <div style="float: left">HEADER</div> <div style="border: 1px solid green;"> <div style="float: left"> <div class="element">lorem ipsum dolor sit amet.</div> <div

can I use flexbox and float at the same time? or use flexbox with absolute positioning?

阅读更多关于 can I use flexbox and float at the same time? or use flexbox with absolute positioning?

问题 for example if I have a 2 column layout (main content and a aside) Can I float the main to the left and aside to left/right and then use flexbox to give the aside an equal height compared to the main content? Do I have to display the whole container to flexbox to include header,main content, aside, and footer or can I just cherry pick one area to use flexbox? 回答1: From Overview, Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric