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>

This is the example code. I want all three boxes to appear side by side, using css. Any way of doing that? I want to use position:fixed, because I want them to appear on the bottom-right corner of the page without disturbing the rest of the page. These boxes will be chat boxes to tell you the truth.

4

6 回答 6

4

我为您创建了这个 jsbin：http://jsbin.com/ikulem/13/edit 请注意 ，您必须对矩形使用 class 而不是 id，因为您有多个元素

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

多谢你们。我使用 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 
<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

首先，您不能三次使用相同的 id。

你可以使用

<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 回答