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。这似乎很简单，但也许如果其他人有这个问题，这将有所帮助。

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

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

将一列放在页面右侧

1 个答案: