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>

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

Answer 1

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

小提琴：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水平浮动从右到左

3 个答案: