0

下部に完全なマークアップがあります。

マージンがある場合:0; スタイル宣言「#sweden dd」では、左に浮いている画像がテキストで囲まれます。これは理解しやすいですが、「#sweden dd」で余白スタイルを変更すると、margin:0; の代わりに margin:0 0 0 98p; を設定しました。テキストは列の画像の横に並べられます。

したがって、margin:0 0 0 98p; を指定したときに、テキストが列に並んで表示されるのはなぜでしょうか。私のマージン スタイルの最後の数字は margin-left であることはわかっているので、それは問題ではありません。

//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

マージン構文が表示された場合..と表示されますmargin:top right bottom left..

これがsweden 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 に答える
0

<dd>HTML コードでは、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 に答える