Question

这是一个非常小的问题！我制作两个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>

Answer 2

你是说这个意思吗？如果您希望文本是切断且可滚动的元素，则需要为其提供自己的div并将其设为overflow: auto。

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: hidden;
}

div.div3 {
  overflow: auto;
  white-space: nowrap;
}

<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;">
    <div class="div3">Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div>
  </div>
</div>

Answer 3

使用div换行文本文本并将其修复为witdth。然后给它属性overflow: auto

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.div2 .text-wrapper {
  overflow: auto;
  height: 200px;
}

div.div2 .text-wrapper .text {
    width: 400px;
}

<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;"> 
    
    <div class="text-wrapper">
     <div class="text">
       Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing
     </div>
    </div>
  </div>
</div>

如果您希望整个div2滚动，那么您将修复为div2

调整大小滚动条的CSS

3 个答案: