如何对齐两个 div（一个固定，另一个带有 break word 属性）？

Question

我在尝试与另一个 DIV 及其在 DIV 内水平对齐时遇到属性 "word-wrap:break-word;" 的问题。看到这两个例子很容易理解我的问题：

#container {
  height: auto;
  overflow: hidden;
}
#left {
  background-color: green;
  width: 120px;
  height: 20px;
  overflow: hidden;
}
#right {
  width: calc(100% - 120px);
  float: right;
  height: auto;
  display: inline-block;
  word-wrap: break-word;
  background-color: red;
}

<div id="container">
  <div id="right">AAAAAAAAAAAAAAAAAAAAA</div>
  <div id="left"></div>
</div>

http://jsfiddle.net/galacticpower/a3nyxhtj/4/

这里，如果调整导航器的大小，右侧的 div 文本会根据需要断开！是啊！

在右边div里面加一个div，它的样式就出问题了...

#inside_right{
  width: auto; 
  display: inline-block; 
  word-wrap:break-word;
  background-color: yellow;
}

<div id="container">
  <div id="right">
    <div id="inside_right">AAAAAAAAAAAAAAAAAAAAA</div>
  </div>
  <div id="left"></div>
</div>

http://jsfiddle.net/galacticpower/a3nyxhtj/3/

如果调整导航器的大小，"word-wrap:break-word" 属性将丢失。文不破！我需要在右侧 div 内的 div 中应用一些样式，而不会丢失此行为。

总而言之，我希望第二个例子中的单词被打断...

有什么想法吗？

非常感谢！

Answer 1

只需应用 max-width: 100% 即可强制字母在行内块内实际中断 #inside_right

#container {
    height: auto;
    overflow: hidden;
}

#left{
   background-color: green;
    width: 120px;
    height: 20px;
    overflow: hidden;
}

#right{
  width: calc(100% - 120px); 
  float: right; 
  height: auto;
  display: inline-block; 
  word-wrap:break-word;
  background-color: red;
}

#inside_right{
  width: auto; 
  display: inline-block; 
  word-wrap:break-word;
  background-color: yellow;
  max-width: 100%;
}

<div id="container">
    <div id="right">
      <div id="inside_right">
         AAAAAAAAAAAAAAAAAAAAA 
      </div>
    </div>
    <div id="left"></div>
</div>

Answer 2

问题出在"display"。您使用：

#inside_right{display: inline-block;}

而浏览器认为这个div里面的所有文字都只是一个符号。您可以使用 display: block 并使用内部宽度 div。

这应该有所帮助！

Answer 3

丢失“#inside_right”中的 'display: inline-block'。我也不明白你为什么在“#right”上需要它，但是“#inside_right”上的属性会让你失望。

如何对齐两个 div（一个固定，另一个带有 break word 属性）？

How to align two divs (one fixed and the other with break word attribute)?

html

css

word-wrap