如何解決CSS中的這種（看似簡單的）格式化問題？
[英]How to solve this (seemingly simple) formatting problem in CSS?
問題描述
使用CSS，格式化框左邊有一個圖標，右邊有一個文本的框的最干凈，最簡單的方法是：
[Icon] Text text text
[____] and more text
and some more text
到目前為止，我已經使用<div class=icon”>和div.icon { float: left; } div.icon { float: left; }將圖標放置在文本的左側，但是“還有更多文本”向左流動（在圖標下方），而不是停留在美觀，固定的欄中。
PS：我不想使用表格。
4 個解決方案
解決方案1
5 已采納 2010-12-15 07:45:57
為什么不使用圖標作為背景圖像？
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 */
}
解決方案2
0 2010-12-15 07:45:58
將文本包裝在div中怎么辦？
解決方案3
0 2010-12-15 07:55:57
這應該工作：
<!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>
在線檢查： http ： //jsfiddle.net/FVgg6/
解決方案4
0 2010-12-15 07:57:31
假設你有類似的東西
<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>
然后，您可以將主div的左邊距設置為圖標的寬度，這將為您帶來不錯的列效果。
.main
{
margin-left:100px;
}
看似簡單，幾乎不可能（？）的CSS布局-占用所有垂直空間
[英]Seemingly simple, practically impossible (?) CSS layout - take all vertical space
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.