How can I position multiple divs side by side?
I have several div's that contain a floated image and an unordered list. I want both of these to be positioned side by side down the page.
The issue is, as the divs go down the page the whole thing falls apart. The images on the right start to go lower and lower and the list items go higher and higher up. Here is what I did.
.imageleft {
float: left;
margin-left: 0;
margin-top: 0;
}
.container-right {
display:inline;
padding-bottom: 10px;
width: 500px;
}
.container-left {
float:left;
padding-bottom: 10px;
width: 500px;
}
<div class="inline">
<div class="container-left">
<img alt="Image info" class="imageleft" src="someimage.png" />
<h3>
Title</h3>
<ul>
Sub title:
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
</ul>
</div>
<div class="container-right">
<img alt="Blah blah" class="imageleft" src="/开发者_运维问答another-image.png" />
<h3>
Title</h3>
<ul>
Sub heading
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
</ul>
</div>
</div>
I tried adding a div around the 2 divs but it doesn't seem to help. How can I prevent this undesired behavior?
Thanks for any tips!
You mean like this http://jsfiddle.net/efVjj/
You really only need the .imageleft class. Apply to both divs and you're set.
Here's the code (I added a border to outline the divs):
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.imageleft {
float: left;
margin-left: 0;
margin-top: 0;
border:1px solid #000;
}
</style>
<title>Untitled Document</title>
</head>
<div class="imageleft">
<img alt="Image info" class="imageleft" src="someimage.png" />
<h3>
Title</h3>
<ul>
Sub title:
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
</ul>
</div>
<div class="imageleft">
<img alt="Blah blah" class="imageleft" src="/another-image.png" />
<h3>
Title</h3>
<ul>
Sub heading
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
<li>
List item</li>
</ul>
</div>
<body>
</body>
</html>
加载中,请稍侯......
精彩评论