Learning div-positioned layout
In CSS 2.1, how can I put different divs next to each others? I found that there is a property float and values left, right, none and inherit and I guess they allow me to put for example picture A left and picture B right.开发者_StackOverflow中文版 But how can I put a picture B below picture A, or for example such that pictures are 15 pixels below the navigation bar of the site?
Even after editing the question, I'm still not 100% sure what you are after. You are mentioning two images and how they are positioned relative to one another but it sounds like the problem is really that they are overlapping another part of the page. Floating an element will allow you to position an element and have the rest of its parent's content wrap around it, like a picture in a news article for example. You can also position divs side by side but that gets a little trickier.
Originally, you mentioned wanting to position one image below another and have those two move together, in which case you would wrap the images in a div and then float the div however you wanted.
In this updated question, it sounds like you would basically just want the images to appear below your page's navigation bar. Without knowing the details, I assume the images are overlapping your page header because they are floated and they are siblings (at the same level in the DOM tree) with the navigation bar's markup. You could do a couple things to fix that. First, you could give the images a margin-top value that's equal to the height of the navigation bar. But that's definitely a hack. Here's a better approach...
Without example HTML, it sounds like you really have two different parts of a page - a header/nav bar and the body of your page. If that's the case, then I would use a div for each. The images would presumably be wrapped in the body's div and no matter how you float them it within that body div, they shouldn't ever overlap the header's div. For example...
<body>
<div id="navigationHeader">
<a href="http://www.google.com">Navigation Option 1</a>
<a href="http://www.google.com">Navigation Option 2</a>
</div>
<div id="pageContent">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="float:left;" />
Even though the image is floated left, it still won't overlap the page navigation header.
</div>
</body>
floats etc requires a fair bit of study ( not that it's a huge deal but a bit more complex than you might think ) .....
figure out the following inline vs block elements ( you can change the default setting) clearing divs
these will help too http://css-tricks.com/all-about-floats/ http://css.maxdesign.com.au/floatutorial/ http://www.w3schools.com/Css/css_float.asp http://www.positioniseverything.net/ordered-floats.html
reading your question again it looks like you might be finding that you need a clearing div beneath the two pictures ( this is non semantic by the way)
加载中,请稍侯......
精彩评论