在css上创建两个div紧挨着？

i wanted to know how to put two div right next each other centered in the page like this:

我想知道如何将两个div放在页面中心的下方,如下所示:

 divLeft                     |                     div right
                             |
                             |
                             |
                             |

thank you :))

谢谢 :))

3 个解决方案

#1

.float-left
{
  float: left;
}

.float-right
{
  float: right;
}

.wrapper
{
  width: 500px;
}

<div id="WrapperDiv" class="wrapper">
    <div id="RightDiv" class="float-right">Content for right div goes here</div>
    <div id="LeftDiv" class="float-left">Content for left div goes here</div>
</div>

You can adjust the width value in wrapper class to suit your needs.

您可以在包装类中调整宽度值以满足您的需要。

#2

Using float:left; and display:inline;, also you might want to set the width, using width:200px;.

使用float:left;并显示:inline;,您也可以使用width:200px;来设置宽度。

#3

Well, depending on how expandable it is you could do the following:

那么,根据它的扩展程度,您可以执行以下操作:

.rightDiv
{
    float: left;
    margin-left: 400px; /* Or whatever */
    width: 400px;
}
.leftDiv
{
    float: right;
    margin-right: 400px;
    width: 400px;
}

I haven't tested it but basically you want to float them the wrong way and then use the margin to push it back towards the center line.

我没有测试过,但基本上你想以错误的方式漂浮它们,然后用边缘将它推回中心线。

#1

.float-left
{
  float: left;
}

.float-right
{
  float: right;
}

.wrapper
{
  width: 500px;
}

<div id="WrapperDiv" class="wrapper">
    <div id="RightDiv" class="float-right">Content for right div goes here</div>
    <div id="LeftDiv" class="float-left">Content for left div goes here</div>
</div>