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

【问题标题】：How to avoid text and textbox overlapping如何避免文本和文本框重叠
【发布时间】：2023-04-06 08:52:02
【问题描述】：

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

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

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

【问题讨论】：

请在片段中发布您的代码 (HTML/CSS/JS) 的最小工作示例。
请创建 jsfiddle
删除style="position: absolute"
使用需要在描述前为div添加class，那么只有你自己处理这个div

标签： jquery html css styles

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：