Question

我写了下面的HTML试图将两个div放在彼此旁边。

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
    <div style='float:left;'>
    Lorem ipsum<br />
    dolor sit amet
    </div>
</div>

然而，我写的代码导致两个div一直向左浮动。这样做的正确方法是将两个div并排浮动。

我需要改变什么才能让两个div并排居中？

Answer 1

不使用float: left，而是使用display: inline-block：

<div id='wrapper' style='text-align: center;'>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet,<br />
        consectetur adipisicing elit
    </div>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
</div>

每个内部div的顶部使用vertical-align: top保持对齐。

示例：http://jsfiddle.net/hCV8f/1/

Answer 2

您必须自动设置边距，并且可能是您的包装器div的特定宽度

<div id="wrapper"></div>

在你的CSS中：

#wrapper {
    width: 70%;
    margin: 0 auto;
}

Answer 3

试试这个：

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;background-color:red;width:50%'>
        Lorem ipsum<br />dolor sit amet
    </div>
    <div style='float:right;background-color:blue;width:50%'>
         Lorem ipsum<br />dolor sit amet
    </div>
</div>

http://jsfiddle.net/JDAyt/

Answer 4

您是否提前知道div的宽度？如果是这样，你可以做一些像

这样的事情

<div class="wrapper" style="margin: 0 auto; width: 200px">
  <div class="inner1" style="width: 100px; float:left;"></div>
  <div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>

Answer 5

对于左侧div，设置左边距。对于正确的div，请设置右侧。像这样：

#leftDiv {
    margin-left: auto;
}

#rightDiv {
    margin-right: auto;
}

这会将它们背靠背放在屏幕的中央。

Answer 6

下面的代码适用于Zebra GC420d打印机：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8">
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
    #div { min-height: 100%; }
    </style>
    </head>
    <body>
    <div style="border: 0px solid red;">
    <table border="0" width="100%" align="center">
    <tr>
    <td style="text-align: center;">
    <?php
    echo $name;
    ?>
    </td>
    </tr>
    <tr><td></td></tr>
    <tr>
    <td style="text-align: center;">
    <?php
    echo 'https://goo.gl/2QvRXf';
    ?>
    </td>
    </tr>

    </table>
    </div>

    </body>
    </html>

希望它有所帮助！

Answer 7

以下为我工作

<div id='wrapper'>
    <div class='inner'>
        content 1
    </div>
    <div class='inner'>
        content 2
    </div>
</div>

CSS：

.wrapper
{
text-align: center;width:auto;margin:0 auto
}
.inner
{
display:inline-block;
}

如何将两个div彼此相邻

7 个答案: