在跨度后创建内容可编辑的div，其中包含文本

Question

Here is a image of what kind of effect I'm trying to have:

      ICON   LINE - 1 Some text Inside a div element
             and the next line should start
             here

      ICON   LINE - 2 Some text Inside a div element
             and the next line should start
             here

      ICON   LINE - 3 Some text Inside a div element
             and the next line should start
             here

And here is the code I tried:

<div>
    <div>
        <span style="padding-left: 40px;">ICON</span>
        <div contenteditable="true" style="display:inline-block; padding-left: 20px; width:200; position: absolute;">
              <font> LINE 1 -- Some text Inside a div element and the next line should start here kjdaskjdaskldjaskldjaskldjaskldjaskljdaskljdaslkjdkl</font>
        </div>    
    </div>

    <div>
        <span style="padding-left: 40px;">ICON</span>
        <div contenteditable="true" style="display:inline-block; padding-left: 20px; width:200; position: absolute;">
              <font>LINE 2 -- Some text Inside a div element and the next line should start here kjdaskjdaskldjaskldjaskldjaskldjaskljdaskljdaslkjdkl</font>
        </div>    
    </div>
</div>

and here is a demo: http://jsfiddle.net/supersuraccoon/djv83qpd/1/

It's almost there but as you can see in the link above all the text are overlapping.

Any suggestion will be appreciated, thanks :)

Answer 1

Forget absolute positioning. Add px to your width s and add vertical-align:top; to your divs so

 <div contenteditable="true" style="display:inline-block; padding-left: 20px; width:200px; vertical-align:top;">

UPDATED FIDDLE

Answer 2

Try This :: [i have added only <br> <br> ]

<div>
    <div>
        <span style="padding-left: 40px;">ICON</span>
        <div contenteditable="true" style="display:inline-block; padding-left: 20px; width:200; position: absolute;">
              <font> LINE 1 -- Some text Inside a div element and the next line should start here kjdaskjdaskldjaskldjaskldjaskldjaskljdaskljdaslkjdkl</font>
        </div>    
    </div>
<br><br>
    <div>
        <span style="padding-left: 40px;">ICON</span>
        <div contenteditable="true" style="display:inline-block; padding-left: 20px; width:200; position: absolute;">
              <font>LINE 2 -- Some text Inside a div element and the next line should start here kjdaskjdaskldjaskldjaskldjaskldjaskljdaskljdaslkjdkl</font>
        </div>    
    </div>
</div>

fiddle :: http://jsfiddle.net/djv83qpd/5/

Answer 3

Try this

<div class="container clearfix">
            <div class="blocks clearfix">
                <div class="image">
                    Image1
                </div>
                <div class="lines">
                    <div>Line one text</div>
                    <div>First block text First block text First block text</div>
                </div>
            </div>

            <div class="blocks clearfix">
                <div class="image">
                    Image2
                </div>
                <div  class="lines">
                    <div>Line two text</div>
                    <div>Second block text Second block text Second block text</div>
                </div>
            </div>

            <div class="blocks clearfix">
                <div class="image">
                    Image3
                </div>
                <div class="lines">
                    <div>Line three text</div>
                    <div>Third block text Third block text Third block text</div>
                </div>
            </div>
        </div>

css is

.clearfix:after {
           content: " ";
           visibility: hidden;
           display: block;
           height: 0;
           clear: both;
        }
        .container{         
            margin: 0 auto;
            width: 70%;
        }
        .blocks .image, .blocks .lines{ 
            float: left;
        }
        .blocks .image {
            border: 1px solid grey;
            margin: 5px;
            height: 100px;
            width: 100px;
        }

Fiddle is