如何避免右侧内容的“填充”

Question

我有以下代码段，导致不需要的“填充”区域，而填充为零。如何避免这个区域？

代码

div.left {
  background-color: red;
  max-width: 25%;
  float: left;
}

div.right {
  background-color: aqua;
  float: left;
}

<div class="left">
  longcontent longcontent longcontent 
</div>
<div class="right">
  something
</div>

结果

我想要什么

修改

上面的代码片段已经过简化了。该解决方案也适用于更复杂的示例：

div.left {
  background-color: red;
  max-width: 40%;
  float: left;
}
div.right {
  background-color: aqua;
  float: left;
}

<div class="left">
  longcontent
  <img src="http://i.stack.imgur.com/snioV.png">
</div>
<div class="right">
  something
</div>

Answer 1

如果你真的想要，也许可以尝试添加word-break：break-all;向左

＆＃13;

＆＃13;

div.left {
  background-color: red;
  max-width: 25%;
  float: left;
  word-break: break-all;
}

div.right {
  background-color: aqua;
  float: left;
}

＆＃13;

<div class="left">
  longcontent longcontent longcontent 
</div>
<div class="right">
  something
</div>

＆＃13;

＆＃13;

＆＃13;