Question

我尝试并排放置2个文本块。你能救我吗？

这样的事情：

enter image description here

如果页面调整大小，我希望2个块居中。我无法将我的积木并排。

我在这里创建一个jsFiddle作为起点：http://jsfiddle.net/LpJBm/2/

感谢。

Answer 1

浮动div并将它们包裹起来居中：http://jsfiddle.net/Xj5Wy/

Answer 2

向右浮动灰色框：

#block2 {
    background-color: #F5F5F5;
    margin: 10px 20px;
    padding: 20px;
    width: 180px;
    float: right;
}

并交换HTML的顺序：

<div id="block2">
    Nos bureaux sont ouverts du lundi au vendredi de 9h00 à 17h00
</div>
<div id="block1">
    Merci d'avoir utilisé notre plateforme...
</div>

http://jsfiddle.net/Eric/LpJBm/8/

将盒子居中是一个单独的问题。要将任何水平居中，请将其包装在div中，然后应用

.wrapper {
    margin: auto;
    width: 400px; /*The width you want it to be when centered*/
    /* min-width works too */
}

在您的情况下，您还需要overflow: hidden，以强制您的包装器包含浮动。

http://jsfiddle.net/Eric/LpJBm/18/

Answer 3

http://jsfiddle.net/LpJBm/4/

就是这样。只需添加：

float:left;

两个div。

Answer 4

尝试

#block1
{
    margin: 10px 20px;
    padding: 20px;
    width: 400px;
    float: left;
}
#block2
{
    background-color: #F5F5F5;
    margin: 10px 20px;
    padding: 20px;
    width: 180px;
    margin-left:400px;
}

Answer 5

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#block2
{
    background-color: #F5F5F5;
    margin: 10px 20px;
    padding: 20px;
    width: 180px;
}
</style>
</head>

<body>


    <div id="block1" style="float:left;">
        Merci d'avoir utilisé notre plateforme...
    </div>

    <div id="block2" style="float:right;">
        Nos bureaux sont ouverts du lundi au vendredi de 9h00 à 17h00
    </div>


</body>
</html>

尝试这样.........你得到答案

有2个文本块并排

5 个答案: