如何防止浮动div与绝对定位相互溢出

时间:2018-04-11 23:09:04

标签: html css

我想在div中显示溢出的文本。我希望它从div的中间开始,然后从那里开始。我也希望它将下一行向下推,这样所有文本都可以显示而不会进入另一个div。

这是一个当前的fiddle我正在努力让这个工作,但我被困了

<div class="row">
     <div class="div1">
      <div>
        <div class="div2">
          Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long
          text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text
          goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes
          here...

        </div>
      </div>
    </div>
  </div>
  <div class="row">
     <div class="div1">
      <div>
        <div class="div2">
          Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long
          text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text
          goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes here... Really long text goes
          here...

        </div>
      </div>
    </div>
  </div>



.div1 {
  height: 150px;
  position: relative;
  float: left;
  width: 300px;
  background: red;
}
.row {
  width: 100%;
  clear: both;
}
.div1>div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

0 个答案:

没有答案