Html 如何在主 <div> 标签内的同一行中水平对齐两个 <div> 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20796596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align two <div> tags horizontally in the same line inside a main <div> tag?
提问by Omi
I am trying to use two <div>elements inside a main <div>. But the problem is, in the first <div>I am using an <image>control and along with it I am fetching some text data from the database. And in second <div>I am using a <gridview>. But I am unable to show these two <div>elements in same line horizontally.
我正在尝试<div>在 main 中使用两个元素<div>。但问题是，首先<div>我使用了一个<image>控件，同时我从数据库中获取了一些文本数据。其次，<div>我正在使用<gridview>. 但我无法<div>在同一行水平显示这两个元素。
I have tried doing this:
我试过这样做：
<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>
Please suggest me if I am doing something wrong?
如果我做错了什么，请建议我？
回答by Bip
css
css
display:inline-block
显示：内联块
add div right partand left partcss
添加 div 右侧部分和左侧部分css
回答by Kunj
Set 'right part' div floatto right. Please check, you are using space in id selectors which is not right.
将 'right part' div float 设置为right。请检查，您在 id 选择器中使用了不正确的空间。
回答by Rich Pauloo
Here's a simple way to get right and left justified text on the same line.
这是在同一行上获得右对齐和左对齐文本的简单方法。
CSS
CSS
.alignleft {
float: left;
}
.alignright {
float: right;
}
HTML
HTML
<div id="textbox">
<p class="alignleft">Text on the left.</p>
<p class="alignright">Text on the right.</p>
</div>
回答by NoobEditor
Your code should align the divs in one line...see here
您的代码应将 div 对齐在一行中...请参阅此处
width:auto; float:left;will only take the content width as div width, so it willalways be inline as long as the total width < 1000px.
width:auto; float:left;只会将内容宽度作为 div 宽度，因此只要总宽度 < 1000px，它就会始终内联。
A simpler suggestion would be to use percentage for widths, this way you don't need to inlinedisplay the.
一个更简单的建议是使用百分比作为宽度，这样您就不需要inline显示。
Also, idv #and .do not contan names with space, they are supposed to be one single word (notice the change i made to your id names)
另外，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;
}
