CSS

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 浮动设置为右侧。请检查，您在id选择器中使用的空间是不正确的。

Answer 3

您的代码应将div排成一行 ... see here

width:auto; float:left;只会将内容宽度作为div宽度，因此只要总宽度＆lt; 总是内联。 1000像素

更简单的建议是使用宽度百分比，这样您就不需要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; }

Answer 4

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

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>

如何在main <div>标记内的同一行中水平对齐两个<div>标记？</div> </div>

4 个答案:

CSS

HTML