Question

我已嵌套divs，我必须在同一行显示它，请帮助我。

另请告诉我如何在处理label id = "remainingcount"时显示进度条。

这是我的代码：

<div class="listbox">
    <asp:Label ID="headertext" runat="server" CssClass="labelresul" Font-Bold="true" Height="50" Text="Available Filter"></asp:Label>
    <span style="padding-left:10px;font-weight:700;">
        <asp:HiddenField runat="server" ID="hdCount" />
        <asp:Label ID="Total" runat="server" Height="50"></asp:Label>
    </span>

    <span style="padding-left:5px;font-weight:700;">
        <asp:Label runat="server" ID="match" Visible="false" Text="Matches"></asp:Label>&nbsp;&nbsp;&nbsp;
        <asp:Label ID="remainingcount" ForeColor="Red" Visible="false" runat="server"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="remaining" runat="server" ForeColor="Red" Text="Results"  Visible="true"></asp:Label>&nbsp;&nbsp;
    </span>

    <div id="divv">
        <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="updFilters" runat="server" >
        <ProgressTemplate>
            <center>
                <asp:Panel ID="resultspanel" runat="server"> 
                    <img alt="Processing" src="Images/waiting_process.gif" />
                </asp:Panel>
            </center>
        </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
</div>

Answer 1

将Div样式设置为

.DivStyle{
   Display: Inline-block;
}

将此属性添加到两个

Answer 2

HTML内容：

<div class='container'>
<div class="align-left">left</div>
<div class="align-right">right</div>
</div>

样式如下所示

.container { 
 width:100%; }

.align-left { 
 float: left;
 width:50%; 
 } 

 .align-right{
 float: right; 
 width:50%
 }

Answer 3

为div设置 float 。

float:left

Answer 4

第一种方式

您可以使用display: inline将两个div元素插入行内。

说明：div元素是块元素，因此其显示样式通常为display: block。

#box1 {
  width: 1005px;
  height: 1000px;  
  padding: 50px;
  border: 1px solid red;
  margin-left: 162px;
  background-color: white;
}

#box2{
  width: 280px;
  height: 250px;  
  padding: 10px;
  background-color: white;

}
#box1, #box2
{
    display:inline;
}

<div id="box1">
</div>


<div id="box2">
</div>

第二种方式

您可以将两个div元素都包装在span标记中。

说明：span的工作方式与div相同，用于组织和分组元素。唯一的区别是span是一个内联元素，因此不需要设置span的样式。 span元素的显示样式通常为display: inline。

.box2 {
  width: 280px;
  height: 250px;
  padding: 10px;
  background-color: white;
}

<span>
<div class="box2">
</div>
<div class="box2">
</div></span>

注意：如果span不起作用，则意味着div标签的内容不能放在一行上。如果发生这种情况，您将需要调整div标签的大小。

对不起，我使用了我自己的示例，但是如果您发现摘要令人困惑，请忽略它们。感谢您阅读我的回答！花费了很多时间写这篇文章，希望对您有所帮助！

同一行中的两个div

4 个答案: