Question

首先要做的事情！

成分：两个div水平对齐（每个都有父级宽度的50％）和一些文本放在第一个div中（ left ）然后，如果溢出，在第二个（右）。 div是200px高。

该文本来自一个PHP脚本，它回显一个包含所有文本的变量（<p><?php echo $foo; ?></p>）。在括号中我写了一个<p>标签。 DOM看起来像这样：

<div class="thecontainer">
    <div class="theleftone">
        <p><?php echo $avariablewithsometext; ?> </p>
    </div>
    <div class="therightone">
        <!-- everything is permitted -->
    </div>
 </div>

问题：我正在尝试使用CSS flex属性实现此目标，但我找不到将第一个div中的溢出文本放在第二个div中的方法。

问题：如何将溢出的文本放在第二个div中，让PHP脚本保持干净？

实际演示：

.thecontainer{
  width:100%;
  height:100px;
  overflow: hidden;
  display: block;
}

.therightone {
    background-color: red;
    width: 50%;
    height:100px;
    display: block;
    float:right;
}
.theleftone {
   background-color: blue;
   width: 50%;
   height:100px;
   display:block;
   float: left;
}

<div class="thecontainer">
    <div class="theleftone">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex </p>
    </div>
    <div class="therightone">
        <!-- everything is permitted -->
    </div>
 </div>

Answer 1

您可以使用CSS3 columns

.thecontainer {
  width: 100%;
}

.theleftone {
  background-color: lightblue;
  columns: 2;
}

p {
  margin: 0
}

<div class="thecontainer">
  <div class="theleftone">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex </p>
  </div>
</div>

在两个不同的div

1 个答案: