Css 从右到左水平浮动

Question

我想要两个这样的div：

.intro-body-left {
    float: left;
    margin-top: 40px;
    width: 40%;
    border-color: #ccc;
    border-radius: 15px;
    background-color: #f8f8f8;
    border: 1px solid;
}

.intro-body-right {
    float: right;
    width: 59%;
    margin-top: 40px;
    border-color: #ccc;
    border-radius: 15px;
    background-color: #f8f8f8;
    border: 1px solid;
}

HTML代码：

   <div class="container">  
    <div id="intro">
        <div class="intro-header">
        </div>
        <a class="none" href="http://www...">
        <div class="intro-body-left animated fadeInLeft">
            <p>some text</p>
        </div>
        <div class="intro-body-right animated fadeInRight">
            <p> some text</p>
        </div>
    </div>
</div>

但现在我想让右边的容器漂浮在左边的容器下面。所以右边的 Container 应该保持在右边，但是所有内容在左边的容器下面应该在左边的 div 下面。所以右边的div意味着那里有不同的厚度。

Answer 1

这是一种（非常简单的）方法。

fiddle: https://jsfiddle.net/69hdLvch/

HTML

<div class="one">Top Top Top Top Top Top Top Top Top Top Top Top </div>
<div class="two">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div>

CSS

.one
{
    width:200px;
    height:200px;
    border:20px transparent;
    background:#f00;
    position:absolute;
}

.two
{
    width:1000px;
    height:500px;
    background:#00f;
    padding-left:250px;
}

Answer 2

这项工作：

.intro-body-left {
     position : absolute;
     top: 40px;
     width: 40%;
     left : 0
     margin : 10px ; // for add space between 2 columns
     border-color: #ccc;
     border-radius: 15px;
     background-color: #f8f8f8;
     border: 1px solid;
 }
.intro-body-right {
   position : relative;
   width: 100%;
   margin-top: 40px;
   border-color: #ccc;
   border-radius: 15px;
   background-color: #f8f8f8;
   border: 1px solid;
  }

Answer 3

将您的 css 更改为：

.intro-body-left {
    float: left;
    margin-top: 40px;
    width: 40%;
    border-color: #ccc;
    border-radius: 15px;
    background-color: #f8f8f8;
    border: 1px solid;
}

.intro-body-right {

    width: 100%;
    margin-top: 40px;
    border-color: #ccc;
    border-radius: 15px;
    background-color: #f8f8f8;
    border: 1px solid;
}

Css 从右到左水平浮动

Css Horizontal Float right to left

html

css

containers

floating