如何解决CSS中的这种（看似简单的）格式化问题？
[英]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: 
使用CSS，格式化框左边有一个图标，右边有一个文本的框的最干净，最简单的方法是：
[Icon] Text text text
[____] and more text
and some more text
So far, I've used <div class=icon”> and div.icon { float: left; } 到目前为止，我已经使用<div class=icon”>和div.icon { float: left; } 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. div.icon { float: left; }将图标放置在文本的左侧，但是“还有更多文本”向左流动（在图标下方），而不是停留在美观，固定的栏中。
PS: I don't want to use tables. PS：我不想使用表格。
4 个解决方案
解决方案1
5 已采纳 2010-12-15 07:45:57
why don't you use the icon as a background image? 为什么不使用图标作为背景图像？
HTML HTML
<div class="withIcon">text text text text text text</div>
CSS CSS
.withIcon {
background-image: url(youricon.png);
background-position: top left;
padding-left: 20px; /* width of your icon */
}
解决方案2
0 2010-12-15 07:45:58
将文本包装在div中怎么办？
解决方案3
0 2010-12-15 07:55:57
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/ 在线检查： http ： //jsfiddle.net/FVgg6/
解决方案4
0 2010-12-15 07:57:31
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. 然后，您可以将主div的左边距设置为图标的宽度，这将为您带来不错的列效果。
.main
{
margin-left:100px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.