平面對齊固定DIV

<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，因爲我希望它們出現在頁面的右下角，而不會干擾頁面的其餘部分。這些箱子將會是聊天室，告訴你事實。平面對齊固定DIV

來源

2013-07-31 Asim Siddiqui

你有無效的標記** ID屬性在HTML頁面中應該是唯一的**使用類別代替 –

而你說你使用'position：fixed'但你沒有使用它。給他們3個不同的id和三種不同的風格。 – putvande

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

來源

2013-07-31 22:12:56 Tom

我創造了這個jsbin你：http://jsbin.com/ikulem/13/edit 注意，您必須使用類而不是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-31 22:13:27

你應該在你的答案 –

包括您的解決方案的相關代碼感謝您指出，我更新了我的答案 –

這是一個快速和骯髒的修復
這裏是身體

<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-31 22:15:14

@toby ..看起來我錯誤地編輯了你的帖子..抱歉，abt那 –

謝謝你們。無論如何，我使用了一個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-31 22:22:38

爲什麼你會使用JavaScript可以使用CSS？ –

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

來源

2013-07-31 22:25:38 Tom

首先，你不能使用相同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：固定，右：0 +底部：0，然後把裏面的chatboxes：

<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-31 22:27:40 cdMinix

平面對齊固定DIV

回答

相關問題