Question

我目前在屏幕的左侧有两个div，现在我想在右侧复制它。我该怎么做？

HTML：

 <div id="contentOne">
<p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
<hr style="border:1px solid Gray; width:150px;" />
<p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>

<div id="contentTwo">
<p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
<hr style="border:1px solid Gray; width:150px;" />
<p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>

<div id="contentThree">
<p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
<hr style="border:1px solid Gray; width:150px;" />
<p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>

<div id="contentFour">
<p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
<hr style="border:1px solid Gray; width:150px;" />
<p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>

的CSS： http://codepad.org/kOsTA7FL

Answer 1

使用float: right作为您想要在屏幕右侧对齐的元素的CSS规则。

Answer 2

HTML：

<div class="pull-right">
    <div id="contentThree">
    <p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
    <hr style="border:1px solid Gray; width:150px;" />
    <p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    </div>

    <div id="contentFour">
    <p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
    <hr style="border:1px solid Gray; width:150px;" />
    <p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    </div>
</div>


<div class="main">
    <div id="contentOne">
    <p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
    <hr style="border:1px solid Gray; width:150px;" />
    <p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    </div>

    <div id="contentTwo">
    <p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
    <hr style="border:1px solid Gray; width:150px;" />
    <p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    </div>
</div>

CSS：

.main { width: 300px;   }
.pull-right { float: right; width: 300px; }

Answer 3

将float:right;添加到屏幕右侧的位置。

了解有关float click here

的更多信息

Answer 4

您还可以在所有Content＃divs周围添加容器，并指定容器的宽度。

然后给每个内容一个浮点数：左边和一个宽度，使得2彼此相邻：

http://jsfiddle.net/PpyyR/

可替换地。使用2个容器，一个用于右侧（float：右侧），另一个用于左侧（float：left）并将内容放在那里：

.one{
    float:left;
}
.two{
     float:right;   
}

http://jsfiddle.net/PpyyR/1/

将div放在屏幕的右侧

4 个答案: