html - 调整滚动条大小的 CSS

Question

又是我问了一个很小的问题!我制作了两个 div，一个包含另一个 div，第二个 div 在左侧有一些文本，在右侧有图像。代码运行良好，但当我调整它的大小时，我注意到文本形成线条以适合图像。有没有办法避免这种情况发生，不调整大小但出现滚动条？我在第二个 div 上尝试了 resize: both; 但结果相同......

div.div1 {
  background-color: #F1F1F1;
  border: 1px solid #CCCCCC;
  padding: 10px;
}

div.div2 {
  background-color: #e2d8ba;
  border: 1px solid #000000;
  padding: 10px;
  text-align: justify;
  overflow: auto;
}

<div class="div1">
  <div class="div2">
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> 
    
    Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing
  </div>
</div>

Answer 1

可以为div2设置一个固定的宽度，为两个DIV都定义overflow: auto，这样就会出现滚动条:

div.div1 {
  background-color: #F1F1F1;
  border: 1px solid #CCCCCC;
  padding: 10px;
  overflow: auto;
}

div.div2 {
  background-color: #e2d8ba;
  border: 1px solid #000000;
  padding: 10px;
  text-align: justify;
  overflow: auto;
  width: 1000px;
}

<div class="div1">
  <div class="div2">
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div>
</div>