Question

<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。这样做的任何方式？我想使用position：fixed，因为我希望它们出现在页面的右下角而不会打扰页面的其余部分。这些盒子将是聊天框，告诉你真相。

Answer 1

我为你创建了这个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>

Answer 2

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

NB。如果您在页面上多次使用ID，请不要使用ID。

Answer 3

这是一个快速而肮脏的修复方法这是身体

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

Answer 4

谢谢你们。我使用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++;
        });
    }

Answer 5

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

这正是你想要的。查看实时版本here！

我还建议将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>

Answer 6

首先，你不能三次使用相同的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;
}

当然，整个课程会更好。你可以用一个位置做一个div：fixed和right：0 + bottom：0然后把聊天盒放在里面：

<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;
}

水平对齐固定DIV

6 个答案: