html - 将一列定位到页面右侧

Question

我的索引页上只需要一列，我希望它位于屏幕的右侧。我正在使用左侧有我想要的背景图像。 bg-image 在 body

中

我正在尝试这种方法，但它并没有完全正确。我是不是做错了，更一般地说，你如何将一列定位到屏幕右侧？

<div style=" float:right" >
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
   <div class="four"></div>

</div>

四个内部div的css

body{
background-image: url(images/splashpage.jpg);
background-position:top;
font-family: Arial, Helvetica, sans-serif;


  }
.one{
 <!-- width:40%; -->
 background-color:lightblue;
 font-family: Arial, Helvetica, sans-serif;
 position:relative;

 <!-- left:150px; -->

}
.two{
 width:580px;
 background-color:lightgreen;
 position:relative;
 right:100px;
 top:50px;
}
.three{
 width:600px;
 background-color:blue;
 position:relative;
 right:100px;

}
.four{
 width:580px;
 position:relative;
 left:20px;
 margin: 0 auto;
 top:50px;

}
.footer{
 width:580px;
 text-align:center;
 position:relative;
 top:50px;

Answer 1

这对于包含的 div 向右浮动来说工作正常，但所有这一切都是将内部 div 并排放置，我需要它们堆叠。

<div style=" float:right" class="container" >
  <div class="one" style="float:right"></div>
  <div class="two" style="float:right"></div>
  <div class="three" style="float:right"></div>
  <div class="four" style="float:right"></div>
</div>

所以我在每个之间放置了一个清晰的 div，现在容器 div 和堆叠时的内部 div 一起 float 。现在看起来很简单，但如果其他人遇到这个问题，这可能会有所帮助。

<div style=" float:right" class="container" >
  <div class="one" style="float:right"></div>
     <div style="clear:both"></div>
  <div class="two" style="float:right"></div>
     <div style="clear:both"></div>
  <div class="three" style="float:right"></div>
     <div style="clear:both"></div>
  <div class="four" style="float:right"></div>
</div>

不确定它是否是最佳实践，或者是否有更有效的方法，但它确实有效。