0

我目前在屏幕左侧有两个 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

4

4 回答 4

2

用作float: right要对齐到屏幕右侧的元素的 CSS 规则。

于 2013-05-23T17:06:21.290 回答
0

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; }
于 2013-05-23T17:10:38.120 回答
0

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

要了解有关浮动的更多信息，请单击此处

于 2013-05-23T17:12:01.440 回答
0

您还可以在所有 Content# div 周围添加一个容器，并为容器指定一个宽度。

然后给每个内容一个 float:left 和一个宽度，以便 2 彼此相邻：

http://jsfiddle.net/PpyyR/

或者。使用 2 个容器，一个用于右侧（float:right），一个用于左侧（float:left），并将您的内容放入其中：

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

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

于 2013-05-23T17:15:09.143 回答