How to solve this (seemingly simple) formatting problem in CSS?
Using CSS, what is the cleanest, easiest way to format a box that has an icon on the left and text on the right:
[Icon] Text text text
[____] and more text
and some more text
So far,开发者_开发技巧 I’ve used <div class=icon”> and div.icon { float: left; } to place the icon left of the text, but “and some more text” flows left (underneath the icon) instead of staying in a nice, solid column.
P.S.: I don’t want to use tables.
why don't you use the icon as a background image?
HTML
<div class="withIcon">text text text text text text</div>
CSS
.withIcon {
background-image: url(youricon.png);
background-position: top left;
padding-left: 20px; /* width of your icon */
}
What about wrapping the text in a div?
This should work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1</title>
<style>
.announce img {
float:left;
margin:0 10px 10px 0;
}
.announce p {
overflow:hidden;
}
</style>
</head>
<body>
<div class="announce">
<img src="http://www.google.ru/images/logos/ps_logo2.png" alt="" />
<p>Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here.</p>
</div>
</body>
</html>
Check online: http://jsfiddle.net/FVgg6/
Assuming you have something like
<div class="icon">this is the icon</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Then you can set the left margin of the main div to be the width of your icon, which will give you a nice column effect.
.main
{
margin-left:100px;
}
加载中,请稍侯......
精彩评论