Question

我的页面上有两个div，我想并排显示它们。我尝试过使用float:left和display:inline-block，但它不起作用。

任何人都可以帮忙吗？这是我的页面fiddle

的样子

Answer 1

尝试将它们放在具有固定边距的父div中。即边距未设置为＆＃34; auto＆＃34;。

Answer 2

摆脱＆＃34; OR＆＃34;在标头标签内。标题标签默认为显示块，因此它们会覆盖您的浮动左侧。您还可以将标头标签更改为float：left;

Answer 3

在<p></p>内写标签不是一个好习惯，你应该摆脱<p>并直接写

<h3>OR</h3>

将风格赋予

h3{
   display:inline-block;
}

See Demo

Answer 4

使用<p>或<h3>并将其设置为inline-block，重置white-space #maincontent及其内容：

http://jsfiddle.net/ATdkE/15/

div#login, div#register, #maincontent > h3 {
    white-space:normal;/* reset to normal */
    display:inline-block;
}
div#login, div#register {
    background: linear-gradient(top, #fff, #f8f8f8);
    border: 1px solid #d0d2d5;
    border-bottom: 1px solid #bebfc2;
    border-radius: 4px;
    margin: 0px 0 10px 0;
    padding: 30px;
    width: 212px;
    vertical-align:top;
}
#maincontent {
    white-space:nowrap;/* keep all inline element on one single line */
    text-align:center;/* no need of obsolete attribute in HTML markup :) */
}

您可以添加一些边距并更改vertical-align http://jsfiddle.net/ATdkE/17/

Answer 5

首先是无效的HTML，

您无法在p标记中包含块级元素，因此请删除围绕p标记的h3标记

其次，将h3的文字或显示为inline-block

演示：http://jsfiddle.net/ATdkE/14/

您可能需要添加更多样式

Answer 6

IE支持内联块，但仅适用于本机内联的元素。使用

float:left

http://jsfiddle.net/ATdkE/18/

如何使用css并排放置两个div

6 个答案: