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

您的代码中存在一些错误

你没有关闭第一个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 3

试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

只使用位置绝对值为Description元素并移动到左侧，其他方面删除文本框的绝对位置并使

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

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

4 个答案: