0

在底部，您有完整的标记。

如果我有保证金：0；在样式声明“#sweden dd”中，文本将围绕向左浮动的图像。这很容易理解，但是如果我更改“#sweden dd”中的边距样式，而不是 margin:0; 我设置边距：0 0 0 98p；文本将在列中的图像旁边排列。

所以我真正无法理解的是，为什么当我指定 margin:0 0 0 98p; 时文本会排成一列？我知道我的边距样式中的最后一个数字是左边距，所以这不是问题。

//start markup causing text to surround the image that is float left
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                font-family:Arial, sans-serif;
                font-size:small;
            }

            #sweden
            {
                float:left;
                width:300px;
                padding:10px 0;
                border:2px solid #C8CDD2;
                background:url(img/bg.gif)no-repeat top left;
            }

            #sweden dl /* block element */
            {
                 float:left;
                 margin:10px 20px;
                 padding:0;
            }

            #sweden dt   /* block element */
            {
                 float:right;
                 margin:0;
                 padding:0;
                 font-size:130%;
                 letter-spacing:1px;
                 color:#627081;
                 width:162px;    
                 background:red;
            }

            #sweden dd
            {
                margin:0; /* This will surround the image with text */
               /* margin:0 0 0 98p; This will keep the text beside the image in a column. */
               padding:0;
               font-size:85%;  
               line-height:1.5em;
               color:#666;
               background:yellow;
           }

           #sweden dd.img img
           {
                float:left;
                margin: 0 8px 0 0;
                padding:4px;
                border:1px solid #D9E0E6;
                border-bottom-color:#C8CDD2;
                border-right-color:#C8CDD2;
                background:#fff;
            }

            #sweden dl dd.img
           {
               margin:0;
           }
       </style>
   <meta charset="utf-8" />
   <title>Chapter 3</title>
       </head>
           <body>
           <div id="sweden">
                   <dl>
                       <dt>Stockholm</dt>
                       <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" 
                           alt="Gamla Stan" /></dd>    
                       <dd>This was taken in Gamla Stan.This was taken in Gamla Stan. 
                           This was taken in Gamla. This was taken in Gamla Stan. 
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla. This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla Stan. This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.</dd>
                   </dl>
               </div>
           </body>
       </html>
//Tony
4

4 回答 4

0

这就是 css 浮动的工作方式。

float CSS 属性指定一个元素应该从正常流中取出并放置在其容器的左侧或右侧，文本和内联元素将环绕它。( Mozilla )

另一方面，当您应用 98px 的左边距时 -

由于边距，文本将不再环绕您的图像

于 2013-08-14T09:05:46.873 回答
0

在 margin 属性值中，使用98px代替98p.

小提琴。

于 2013-08-14T09:06:35.167 回答
0

在您的 HTML 代码中，您已将文本包装在<dd>您给左边距为 98 的元素中。

请参阅http://jsfiddle.net/FmLjn/2/

<div id="sweden">
                   <dl>
                       <dt>Stockholm</dt>
                       <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" 
                           alt="Gamla Stan" /></dd> 

                       <dd>
                       This was taken in Gamla Stan.This was taken in Gamla Stan. 
                           This was taken in Gamla. This was taken in Gamla Stan. 
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla. This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla Stan. This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                           This was taken in Gamla Stan.This was taken in Gamla Stan.
                       </dd>
                   </dl>
               </div>

这意味着整个元素从父容器的左侧内侧被赋予 98px 的边距，<div id='sweden'>结果显示为一列 - 这与浮动的任何内容（图像）无关。如果您希望图像和文本之间的间隙更大，并且文本仍然环绕图像，您需要更改浮动元素本身的填充/边距，而不是环绕的文本。

见这里：http: //jsfiddle.net/q9rek/

于 2013-08-14T09:07:01.553 回答
0

如果您看到边距语法.. 它说margin:top right bottom left..

所以这是您更新的瑞典 dd 代码希望这是您正在寻找的。

 #sweden dd
                {
                    /*margin:0;  This will surround the image with text */
                    margin:0 0 0 98px; /*This will keep the text beside the image in a column. */
                   padding:0;
                   font-size:85%;  
                   line-height:1.5em;
                   color:#666;
                   background:yellow;


               }

这是演示

于 2013-08-14T09:07:33.543 回答