Question

我确信有一个非常简单的解决方案，但我找不到它。

我想要一些正文包围两个div - 左上角是一个信息框，右下方25％是拉引号。

    <div class="A">

    <div class="B">
    Infobox
    </div>

    <div class="D">  
    Lorem ipsum...
    </div>

   <div class="C">
   Pullquote
   </div>

   </div>

我没有问题让它包裹信息框，但是pullquote被推到了底部。我可以修复它的位置，然后文本在它后面运行。

这是我的CSS

   .A {
   height: 100em;
   width:100%;
   background-color: red;
   }

   .B {
   height: 2em;
   width: 20%;
   float: left;
   background-color: blue;
   }

   .C {
   height: 2em;
   width: 20%;
   float: right;
   position: relative;
   top: 25%;
   background-color: green;
   }

   .D {

   }

我做错了什么？

Answer 1

如果我理解得很好，你就会把拉引号放在右上方，但是有25％的问题。如果您想在信息框右侧放置Lorem ipsum，请执行此操作

.A {
    border-top: 50px;
    position: relative;
    height: 100vh;
    width:100%;
    background-color: red;
}

.B {
    height: 2em;
    width: 20%;
    float: left;
    background-color: blue;
}

.C {
    height: 2em;
    width: 20%;
    float: right;
    position: absolute;
    top: 25%;
    right: 0;
    background-color: green;
}

.D {
    float: left;
}

如何使文本环绕固定div

1 个答案: