CSS - 内联块100％宽度并排块 [英] CSS - inline blocks side by side with 100% width

问题描述

我有两个文本块。文本的长度不是固定的（用户输入）。左侧的块中有短文本，但右侧块可能包含非常长的文本。块应该并排显示，并且分布在父母的常量宽度的100％上，不能少于100％。

简单示例：
https://jsfiddle.net/hh6a03cy/1/

 < div style =white-space：nowrap; font-size：xx-large;> 
< span> woohoo< / span> 
将格式= 显示：内联块;溢出缠绕：打破字;宽度：100％;空白：正常;垂直对齐：顶部; > gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg 
将; / DIV> 
< / div> 
  

这个解决方案的问题在于有一个水平滚动条，因为右边的块占100％它的父宽度，但它应该少一些，因为这两个块的合理宽度应该是100％。

有什么想法？

感谢！

解决方案

您可以使用flexbox完成此操作，并且使用更少的CSS。

  .container {display：flex;}。container div {margin-left：.5em; word-break：break-word;}  

< div类= 容器 > <跨度>哇噢< /跨度> < DIV> gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg< / DIV>< / DIV>

I have two blocks with text. The length of the text is not constant (user input). The left block has short text in it but the right block might contain really long text. The blocks should appear side by side and spread over 100% of the parent's constant width, no more no less.

Simplified Example: https://jsfiddle.net/hh6a03cy/1/

<div style="white-space: nowrap; font-size: xx-large;">
  <span>woohoo</span>
  <div style="display: inline-block; overflow-wrap: break-word; width: 100%; white-space: normal; vertical-align: top;">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

The problem in this solution is that there is a horizontal scroll bar because the right block takes 100% of its parent's width, but it should take less since the comulative width of the two blocks should be 100%.

Any ideas?

Thanks!

解决方案

You can accomplish this, and with much less CSS, using flexbox.

.container {
  display: flex;
}

.container div {
  margin-left: .5em;
  word-break: break-word;
}

<div class="container">
  <span>woohoo</span>
  <div>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

这篇关于CSS - 内联块100％宽度并排块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！