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 に答える