Question

这是我想要产生什么样的效果的图像：

      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

以下是我尝试的代码：

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

这是一个演示： http://jsfiddle.net/supersuraccoon/djv83qpd/1/

它几乎就在那里，但正如您在上面的链接中看到的那样，所有文本都是重叠的。

任何建议都将不胜感激，谢谢：）

Answer 1

忘记absolute定位。将px添加到您的width并将vertical-align:top;添加到您的div中，以便

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

UPDATED FIDDLE

Answer 2

试试这个:: [我只添加了<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>

小提琴:: http://jsfiddle.net/djv83qpd/5/

Answer 3

试试这个

int

css是

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

Fiddle is

创建内容可编辑的div，其中包含文本内部

3 个答案: