How float image and text correctly using css
I want a format html using CSS so that I get the following:
Image on the left, with subject and body next to it on the right. I want subject to be on one line and the body to be on the other. With One message after each other on subsequesnt blocks downs the page.
However I'm getting the subject and the body one one line and a cacade effect down the page.
Here is what I seem to be getting.
My html is :
<!DOCTYPE html PUBLIC "-//开发者_如何学运维W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>messages to/from someone</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
</head><body>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
</body></html>
My CSS is:
.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.message{
display: block;
}
.subject {
display: inline;
}
.body {
display: inline;
}
Edit: I've edited the code to show where I started from. I was under the impression that div class='message' would cause a line break between messages but I'm getting a cascade effect.
Add:
class="floatimgleft"
to your img tags:
<img src='../code/images/arrow-right.png' width='64' height='64' border='0' class="floatimgleft" />
Also, seems you are not using to class either and you are missing = in the <div class'message'>.
Here's a jsfiddle to test it out:
- http://jsfiddle.net/CdBSU/
EDIT: For having it clear, add clear: left to message. See the fiddle:
- http://jsfiddle.net/CdBSU/2/
for a demonstration.
For the layout you were looking for, I would probably go with something more like:
Index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>messages to/from someone</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul id="messages">
<li>
<div>
<span class="icon"></span>
<h2>Subject</h2>
<p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</li>
<li>
<div>
<span class="icon"></span>
<h2>Subject</h2>
<p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</li>
</ul>
</body>
</html>
Style.css:
h2, p { clear: none; padding: 0px; margin: 0px; }
ul#messages { text-align: left; }
ul#messages li { margin-bottom: 25px; }
ul#messages li > div > span.icon { float: left; display: block; width: 64px; height: 64px; border: 1px solid #111; /* border added to demonstrate */ background-image: url('../code/images/arrow-right.png'); }
Demonstrated at: http://jsfiddle.net/j7KHg/2/
加载中,请稍侯......
精彩评论