在并排div之后，我想在左侧的Css位置上新建一行

我有关于位置的css问题。在并排div之后，我想在左侧新增一行，输出如下所示。有人能告诉我如何实现它吗?提前谢谢。

理想的页面输出:

------------------------------------------------------------------------_------------
| left                                                                        Right |
| New line New line New line New line New line New line                             |
-------------------------------------------------------------------------------------

当前输出:

-------------------------------------------------------------------------------------
| left                                                                         Right|
|                              New line New line New line New line New line New line|
-------------------------------------------------------------------------------------

这是我的代码

<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
    position: relative;
    left: 20px;
}
.Right{
float: right;
text-align:right;
}
.Left{
float: left;
}
.clear{
   clear: both;
} 
.newline{
     float: left;
      text-align:left;    
}
</style>
</head>
<body>
  <div class="Left">left</div>
  <div class="Right">Right</div>
  <div class="clear"></div>
  <div class="newline">New line New line New line New line New line New line </div>

</body>
</html>

你的CSS是正确的。你的HTML不是。你永远不会关闭右div，这样浏览器就会认为你的换行div在该div内。

<div class="Right">Right<div>

<div class="Right">Right</div>

与纯css从.Right类float:right:

.Right{
    /*float: right; Remove this */
    text-align:right;
}

小提琴

相关内容

最新更新

热门标签：