How to solve this (seemingly simple) formatting problem in CSS?_问答_开发者

How to solve this (seemingly simple) formatting problem in CSS?

开发者 https://www.devze.com 2023-01-30 10:31 出处：网络

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 css-float

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.