如何在主<div>标签内使两个<div>标签在同一行上水平对齐？

Question

我正在尝试在一个主要的

元素中使用两个

元素。但问题是，在第一个

元素中，我正在使用一个控件，并同时从数据库中获取一些文本数据。而在第二个

元素中，我正在使用一个。但我无法在同一行水平显示这两个

元素。

我已经尝试了以下操作:

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

请问我做错了什么吗？

- Omi

---

尝试将width:auto更改为width:50%; - Dan Goodspeed

将第二个 div 的 float:right; 属性设置为浮动到右侧。 - Pranav C Balan

Answer 1

CSS

显示：内联块级元素

添加div的右侧和左侧的CSS样式

- Bip

Answer 2

将“右半部分”div的浮动设为右侧。请注意，您正在使用ID选择器中的空格，这是不正确的。

- Kunj

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>

- Rich Pauloo

Answer 4

您的代码应该将div对齐在一行中... 请点击这里查看

width:auto; float:left; 只会将内容宽度作为div宽度，所以只要总宽度< 1000px，它就会始终保持内联。

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

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

演示

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

- NoobEditor

---

嗨@NoobEditor， 是的，这就是我对这个问题感到困惑的原因。实际上还有一个问题，我将从数据库中获取的图像和详细信息放在一个div中，而gridview则在第二个div中。但在大多数情况下，我获取的详细信息不会显示在页面上，而gridview则会显示。 - Omi

主 div 的宽度为 1000 像素，我将这两个 div 放在父 div 中。我猜现在问题出在这两个 div 的宽度上。我也尝试了 width=auto; 选项，但这样会影响这两个 div 的对齐方式。 - Omi

如果宽度的数量固定（如果只有2个），则将width:500px分配给两个子级div，这将有助于它们。在这里jsfiddle.net/9a3tH/6/可以看到...另外它不是width=auto，而是width:auto。 - NoobEditor

@user2862233：关于您的图像和数据...我不是很擅长ASP...您首先必须检查数据是否出现在页面上...浏览页面源代码并查看所需数据是否存在！ - NoobEditor