如何避免文本和文本框重叠

Question

<div class="items" style="height: 100%">
<div id="search" style="position: absolute">
    <input type="text" placeholder="Search" autocomplete="off"/>
    <span class="search-icon"></span>
</div>
<div>
    <div id="Description"">
    </div>
</div>
<div id="container" style="width: 100%">
</div>

jsfiddle: https://jsfiddle.net/0gL5017j/

我需要左侧的文本和右侧的文本框不重叠。

如何避免文本框和文本（描述）重叠？

Answer 1

删除absolute

#search {
    float: left;
    margin-right: 10px;
}

<div class="items" style="height: 100%">
<div id="search">
    <input type="text" placeholder="Search" autocomplete="off"/>
    <span class="search-icon"></span>
</div>
<div>
    <div id="Description">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>
</div>
<div id="container" style="width: 100%">
</div>

Answer 2

只需对描述元素使用绝对位置并移至左侧，否则删除文本框的绝对位置并使

#search
{     text-align: right;
  display:inline-block;
  width:300px;

}

#description
{
  width:400px;
  display:inline-block;
}


<div class="items" style="height: 100%">
    <div id="search" >
        <input type="text" placeholder="Search" autocomplete="off"/>
        <span class="search-icon"></span>
    </div>
    </div>
        <div id="Description"">
        TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
        </div>
    </div>
    <div id="container" style="width: 100%">
    </div>
</div>

Answer 3

你的代码有一些错误

你没有先关闭div
为 id="Description"

"

我删除了position:absolute属性

试试这个

<div class="items" style="height: 100%">
    <div id="search" >
        <input type="text" placeholder="Search" autocomplete="off"/>
        <span class="search-icon"></span>
    </div>
    <div>
        <div id="Description">
        TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
        </div>
    </div>
    <div id="container"  style="width: 100%">
    </div>
</div>

和CSS

#search {
  text-align: right;
}
#Description{
word-wrap: break-word;
}

和UPDATED FIDDLE

Answer 4

试试这个。

#search {
  width:15%;
  float:right;
}
#Description{
  width:85%;
  float:left;
  word-wrap:break-word;  
}

<div class="items" style="height:100%">       
    <div id="search">
        <input type="text" placeholder="Search" autocomplete="off"/>
        <span class="search-icon"></span>
    </div>
     <div id="Description">            TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
     </div>
    <div id="container" style="width: 100%">
    </div>
</div>

如何避免文本和文本框重叠

How to avoid text and textbox overlapping

html

css

jquery

styles