使用css在下一行中移动div

Question

我有两个div，其中有一个文本框，另一个只有纯文本。这是它的样子： 。我想将带有语言的文本div移动到图片中箭头显示的下一行。我搜索了每一个无法找到任何解决方案，wordwrap无效的地方。我也必须在CSS内做到这一点。

以下是两者的aspx代码：

<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
 <div id="txtBox">
   <asp:textbox id="box" runat="server"></asp:textbox>
   <div id="text" runat="server">Language</div>
 </div>
</asp:Panel>

css:

#search
{
    position:absolute; 
    top:100px;  
    height:50px;
    left:100px;
    width:1000px;    
}
#txtBox
{
    float: left;
}

Answer 1

以下是遇到同样情况的任何人的解决方案：

#text
{
  clear: left;
}

clear:left将文本移动到文本框底部的下一行。然后，您可以使用margin-left在任何您想要的位置设置文本。

Answer 2

在这种情况下，您不想使用float:left。 float:left用于水平堆叠block级HTML元素。

block级元素自动垂直堆叠，这似乎就是你想要的。

但是，<asp:TextBox>是一个inline级元素，因此您可以在其后放置<br />，或将其包装在<div>中。

解决方案：

<强> HTML

<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
 <div id="txtBox">
   <asp:textbox id="box" runat="server"></asp:textbox>
   <br />
   <div id="text" runat="server">Language</div>
 </div>
</asp:Panel>

或

<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
 <div id="txtBox">
   <div>
     <asp:textbox id="box" runat="server"></asp:textbox>
   </div>
   <div id="text" runat="server">Language</div>
 </div>
</asp:Panel>

<强> CSS

.search-class
{   /* Curt is right, the ID="search" is in a naming container, */
    /* so use class selector */
    position:absolute; 
    top:100px;  
    height:50px;
    left:100px;
    width:1000px;    
}

Answer 3

你尝试过做过： 使用语言在div上clear:both？

也许你应该包含文本框

/* Containing floats */
.contain:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* IE6 */ 
* html .contain {
    height: 1%;
}

/* IE7 */
*:first-child+html .contain {
    min-height: 1px;
}

Answer 4

当ASP.NET控件呈现给客户端时，它们有时会生成不同的ID（除非在ASP.NET 4中另有说明）。

查看您的代码，我看不到ID为txtBox的任何控件，因此这些样式未应用。

使用ASP.NET时，我发现最好使用类进行样式化，因为渲染后它们将保持不变。

<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
 <div id="txtBox">
   <asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
   <div id="text" runat="server">Language</div>
 </div>
</asp:Panel>

.search
{
    position:absolute; 
    top:100px;  
    height:50px;
    left:100px;
    width:1000px;    
}
.txtBox
{
    float: left;
}

我没有测试过这段代码，但您现在应该看到这些样式正确应用，因此您可以根据需要修改它们。