html - Why the content in the span elements can't be put in the div container? -

-

the content in p elements can put in div container following css codes.

    * {        margin: 0 0 0 0;        padding: 0 0 0 0      }      div.container {        width: 400px;        height: 121px;        border: 1px solid red;        position: absolute;        bottom: 0px;        left: 0px;        right: 0px;        top: 0px;        margin: auto;      }      div.box {        float: left;      }      div img {        margin: 0px;        padding: 0;        width: 121px;        height: 121px;        float: left;      }      div.description {        float: left;        border 1px solid red;        margin: 10px 50px;      }
<div class="container">    <div class="box">      <img src="images/set06.jpg" />    </div>    <div class="description">      <p>music mane: xxxxxxxx</p>      <p>author: yyyyyyyy</p>      <p>publication：20081001</p>      <p>language：english</p>    </div>  </div>

enter image description here

now replace p elements span elements.

    * {        margin: 0 0 0 0;        padding: 0 0 0 0      }      div.container {        width: 400px;        height: 121px;        border: 1px solid red;        position: absolute;        bottom: 0px;        left: 0px;        right: 0px;        top: 0px;        margin: auto;      }      div.box {        float: left;      }      div img {        margin: 0px;        padding: 0;        width: 121px;        height: 121px;        float: left;      }      div.description {        float: left;        border 1px solid red;        margin: 10px 50px;      }
<div class="container">    <div class="box">      <img src="images/set06.jpg" />    </div>    <div class="description">      <span>music mane:  xxxxxxxx</span>      <span>author:  yyyyyyyy</span>      <span>publication：20081001</span>      <span>language：english</span>    </div>  </div>

the displayed effect following. enter image description here

all contents in span out of div container,not same effect in p elements,how make contents in span elements within div container?

the reason works in first case , not second because <p> tags display: block default , <span> tags display: inline default. block paragraph elements display 1 per line within parent, , since parent floated, take width necessary.

but, inline span tags, display side side, taking width can, causing parent (the description div) wider space right of image. so, description div displays below image.

to fix this, can set display: block on span elements. like:

div.description span {     display: block; }

here's working demo: https://jsfiddle.net/uy8x9z4v/. however, since <p> tags have block display feature need, recommend using them instead of spans, unless have reason not to.


Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more