創建內容編輯的DIV在與文本範圍內

這裏是一個什麼樣的效果，我想有一個形象：創建內容編輯的DIV在與文本範圍內

 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/

它幾乎在那裏，但你可以在上面的鏈接看到所有的文字重疊。

任何建議將讚賞，感謝:)

來源

2016-02-12 supersuraccoon

您需要滾動或您需要擴展div之間的空間？ –

爲什麼你需要絕對定位？ –

當前兩個div（包含line1，line2）內的內容重疊。我希望第二個div跟着第一個div（比如他們之間有一個20px）。你可以檢查jsfiddle演示。 – supersuraccoon

忘記absolute定位。添加px您width S和添加vertical-align:top;到您的div所以

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

UPDATED FIDDLE

來源

2016-02-12 08:40:24

感謝您的快速回復，它工作:) – supersuraccoon

試一試:: [我僅添加了<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/

來源

2016-02-12 08:40:16

試試這個

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

.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

來源

2016-02-12 08:48:17 PHPExpert

創建內容編輯的DIV在與文本範圍內

回答

相關問題