0 
<html>
    <head>
        <style>
            #rectangle {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 150px;
                height: 200px;
            }
        </style>
    </head>
        <body>
            <div id='rectangle' style='background-color:red;'></div>
            <div id='rectangle' style='background-color:green;'></div>
            <div  id='rectangle' style='background-color:black;'></div>
        </body>
</html>

これはサンプルコードです。css を使用して、3 つのボックスすべてを並べて表示します。それを行う方法はありますか？position:fixed を使用したいのは、ページの残りの部分を邪魔することなく、ページの右下隅に表示したいからです。これらのボックスは、本当のことを言うためのチャット ボックスになります。

4

6 に答える 6

4

この jsbin を作成しました: http://jsbin.com/ikulem/13/edit 複数の要素があるため、四角形には id の代わりに class を使用する必要があることに注意してください。

CSS:

#footer {
    position:fixed;
    right:0;
    bottom:0;
}
.rectangle {
  float: right;
  width: 150px;
  height: 200px
}

HTML:

<html>
<head>
</head>
<body>
  <div id="footer">
    <div class='rectangle' style='background-color:red;'></div>
    <div class='rectangle' style='background-color:green;'></div>
    <div class='rectangle' style='background-color:black;'></div>
  </div>
</body>
</html>
于 2013-07-31T22:13:27.903 に答える
1 
<html>
<head>
<style>
.rectangles {
    position:absolute;
    right:0;
    bottom:0;

}
.rectangle {
    width: 150px;
    height: 200px;
    float:right;
}
</style>
</head>
<body>
<div class='rectangles'>
    <div class='rectangle' style='background-color:red;'></div>
    <div class='rectangle' style='background-color:green;'></div>
    <div class='rectangle' style='background-color:black;'></div>
</div>
</body>
</html>

注意。ページで複数回使用している場合は、ID を使用しないでください。

于 2013-07-31T22:12:56.823 に答える
1

これは簡単で汚い修正です これが
本文です

<body>
  <div class='rectangle' id="red"></div>
  <div class='rectangle' id="green"></div>
  <div class='rectangle' id="black"></div>
</body>

ここにCSSがあります

#wrapper{
    position:fixed;
    right:0;
    bottom:0;
}

.rectangle {
    display: inline-block;
    width: 150px;
    height: 200px;
}

.red{
    background:red;
}

.green{
    background: green;
}
.black{
    background:black;
}

関連する jsfiddle: http://jsfiddle.net/tlwr/xLTJE/1/

于 2013-07-31T22:15:14.137 に答える
0 
<html>
 <head>
  <style>
   #shape{
     bottom: 0;
     right: 0;
     position: absolute;
   }
   .rectangle{
     float: left;
     width: 150px;
     height: 200px;
   }
  </style>
 </head>
 <body>
  <div id="shape">
    <div class='rectangle' style='background-color:red;'></div>
    <div class='rectangle' style='background-color:green;'></div>
    <div class='rectangle' style='background-color:black;'></div>
  </div>
 </body>
</html>

これはまさにあなたが望むように機能します。ここでライブバージョンをチェックしてください！

また、CSS を別のファイルに移動し、背景色のインライン CSS を省略して CSS ファイル内に配置することもお勧めします。これにより、コードがよりきれいになります。例えば：

CSS:

.red{background-color:red}
.green{background-color:green}
.black{background-color:black}

HTML:

<div id="shape">
  <div class='red rectangle'></div>
  <div class='green rectangle'></div>
  <div class='black rectangle'></div>
</div>
于 2013-07-31T22:25:38.127 に答える
0

みんなありがとう。私はJavascript関数を使用してそれを行いました..とにかくありがとう。

    function restructureChatBoxes() {
        align=0;
        $(".shout_box").each(function(index) {
            console.log ( index );
            if (align == 0) {
                $(this).css('right', '0px');
            } else {
                width = (align)*(240+2);
                $(this).css('right', width+'px');
            }
            align++;
        });
    }
于 2013-07-31T22:22:38.717 に答える
0

まず、同じIDを3回使うことはできません。

あなたが使用することができます

<div id='rectangle-01' style='background-color:red;'></div>
<div id='rectangle-02' style='background-color:green;'></div>
<div id='rectangle-03' style='background-color:black;'></div>

代わりは。

ID を調整する場合に使用する CSS は次のとおりです。

#rectangle-01 {
    position:fixed;
    right:0;
    bottom:0;
    width: 150px;
    height: 200px;
}

#rectangle-02 {
    position:fixed;
    right:150px;
    bottom:0;
    width: 150px;  //so the divs don't overlap
    height: 200px;
}

#rectangle-03 {
    position:fixed;
    right:300px;
    bottom:0;
    width: 150px;
    height: 200px;
}

もちろん、すべてがクラスでより良くなるでしょう。position:fixed と right: 0 + bottom: 0 で div を作成し、その中にチャットボックスを配置できます。

<div id='chatboxes'>
    <div class='rectangle' style='background-color:red;'></div>
    <div class='rectangle' style='background-color:green;'></div>
    <div class='rectangle' style='background-color:black;'></div>
</div>

このための css は次のようになります。

#chatboxes {
    positon:fixed;
    right:0;
    bottom:0;
}

#chatboxes .rectangle{
    float:left;
    width: 150px;
    height: 200px;
}
于 2013-07-31T22:27:40.587 に答える