html - 如何避免 right "padding"用于 ragged-right 内容

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;向左

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

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

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