2 Replies Latest reply on May 19, 2014 11:28 PM by Xoco

    Insert images into div like words (text-align)

    Xoco Level 3

      I need to insert into a div various logos (img), but that when the div would be narrower, logos should keep their distance between them, and that many lines are created with images if as needed (like words/letters inside text box).

       

      If I put the images inside the div using percentages or fixed distances in pixels, obviously always the same number of logos on each line remains as it is at design time.

       

      I suppose it must be done by code but do not know how.

       

      Thank you.

        • 1. Re: Insert images into div like words (text-align)
          hemanthR Adobe Employee

          Add images into a div using code and set display as inline and float as left ,with required right margin.

          Something link

          $("head").append("<style type='text/css'>.myImg{display:inline;float:left;margin:10px}</style>");

           

           

          var imageHolder = "<div id='myImages'></div>";

          sym.$('Stage').append(imageHolder);

          $("#myImages").append("<img src='images/Argentina.png' class='myImg'>");

          $("#myImages").append("<img src='images/Australia.png' class='myImg'>");

          $("#myImages").append("<img src='images/Austria.png' class='myImg'>");

          $("#myImages").append("<img src='images/Belgium.png' class='myImg'>");

          $("#myImages").append("<img src='images/Brazil.png' class='myImg'>");

           

          Since img is inline tag there it no need to even add display:inline and float:left i think

          1 person found this helpful
          • 2. Re: Insert images into div like words (text-align)
            Xoco Level 3

            It's exactly what I wanted, I didn't know the inline value of the CSS display property. The default value in Edge is always block and only can select none in design time.

             

            I suppose that other alternatives would to create a small page with Dreamweaver (formatted and with tables if needed) and add the resulting code into HTML div tag with jQuery append() Method. Or use a jQuery plugin more sofisticated like Justified Gallery | jQuery Plugin Registry.

             

            Thank you hemanthR