1

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

像这样的东西：

在此处输入图像描述

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

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

谢谢。

4

5 回答 5

3

浮动 div 并将它们包装为居中：http: //jsfiddle.net/Xj5Wy/

于 2012-05-25T09:28:22.637 回答
1

只需将灰色框向右浮动：

#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>

​<a href="http://jsfiddle.net/Eric/LpJBm/8/" rel="nofollow">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/ ​</p>

于 2012-05-25T09:28:31.837 回答
0

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

它在那里。只需添加：

float:left;

到两个 div。

于 2012-05-25T09:26:28.060 回答
0

尝试

#block1
{
    margin: 10px 20px;
    padding: 20px;
    width: 400px;
    float: left;
}
#block2
{
    background-color: #F5F5F5;
    margin: 10px 20px;
    padding: 20px;
    width: 180px;
    margin-left:400px;
}
于 2012-05-25T09:26:43.973 回答
0 
<!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>

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

于 2012-05-25T09:36:12.770 回答