如何在主 <div> 标签内的同一行中水平对齐两个 <div> 标签？ [复制]

Question

我正在尝试在主 <div> 中使用两个 <div> 元素。但问题是，在第一个<div> 中，我使用了<image> 控件，并且我正在从数据库中获取一些文本数据。在第二个<div> 中，我使用的是<gridview>。但我无法在同一行水平显示这两个<div> 元素。

我试过这样做：

<div style="width:1000px;overflow:hidden; height:auto; float:left; text-align:justify; margin-bottom:15px;">
    <div id="right part" runat="server" style="width:auto; float:left; margin:0 12px 12px 0;">
        <asp:Image ID="Image1" runat="server" Height="122px" Width="148px" /><% =details %></div>
    <div id="left part" runat="server" style="float:left;width:auto;display:inline-block;">
        <asp:GridView ID="GridView1" runat="server" ShowHeader="False" 
                      ForeColor="Black" GridLines="None" EnableModelValidation="True" 
                      onpageindexchanging="GridView1_PageIndexChanging" onrowcreated="GridView1_RowCreated">
        </asp:GridView>    
    </div>
</div>

如果我做错了什么，请建议我？

Answer 1

css

显示：内联块

添加div 右侧部分和左侧部分 css

Answer 2

将“右侧部分”div float 设置为 right。请检查，您在 id 选择器中使用了不正确的空格。

Answer 3

这是一种在同一行上获取右对齐和左对齐文本的简单方法。

CSS

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

HTML

<div id="textbox">
  <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>

Answer 4

您的代码应该将 div 对齐在一行中... see here

width:auto; float:left; 只会将内容宽度作为 div 宽度，所以 它会 总是内联，只要总 宽度 。

一个更简单的建议是使用百分比作为宽度，这样您就不需要inline 显示。

此外，idv # 和 . 的名称不包含空格，它们应该是一个单词（请注意我对您的 id 名称所做的更改）

demo

html, body {
    width:100%;
    height:100%;
}
#main {
    width:100%;
    height:100%;
    float:left;
    text-align:justify;
    margin-bottom:15px;
}
#right_part {
    width:49%;
    float:left;
    border:1px solid #000;
}
#left_part {
    border:1px solid #000;
    float:left;
    width:49%;
    display:inline-block;
}