html - 当第二个 div 可能有 loooong 字符串时，水平堆叠两个 div LTR

Question

用例似乎微不足道，但我无法让它按需要工作。我需要将第二个 div 及其所有内容放在第一个 div 的右侧。当字符串足够长时，它会换行到第二行，其中包含我想尝试的 CSS 属性的所有组合:

注意事项:

• 我不知道这些 div 内容的高度，因此无法为它们以及父级/容器设置固定高度
• 我可以将 fixed with 设置为第一个 div，实际上希望它占据整个左侧部分(从上到下)
• 实际上，我想要的是带有两个单元格但没有

  这是 jsfiddle和我试过的示例文本。当第二个 div 不包含长字符串时，带有 float 的典型解决方案效果很好:

  HTML

  <div class="container1 clearfix"><div>
          <p>first 1</p>
          <p>first 2</p>
      </div><div>
          <p>second 1</p>
          <p>second 2</p>
          <p>second second second second second second second second second second second second </p>
          <p>second 4</p>
      </div>
  </div>
  

  CSS

  .clearfix:before,
  .clearfix:after { display: table; content: " "; }
  .clearfix:after { clear: both; }
  
  div { outline: 1px solid red; } 
  div > div:nth-child(1) { outline: 1px solid green; } 
  div > div:nth-child(2) { outline: 1px solid orange; } 
  
  
  .container1 { overflow: hidden; }
  .container1 > div { float: left; height: 100%; /* display: inline-block; */}
  .container1 > div:nth-child(1) { width: 80px; } 
  .container1 > div:nth-child(2) { } 
  

  最佳答案

  一种选择是在这些 div 上使用 display:table-cell 规则:

  .container1 > div {
      height: 100%;
      display: table-cell;
  }
  

  jsFiddle example

  关于html - 当第二个 div 可能有 loooong 字符串时，水平堆叠两个 div LTR，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20550438/

  上一篇：html - 文本未出现

  下一篇：css - 将移动 dp 字体大小转换为桌面 px 值

  相关文章：

  CSS Positioning-Position 相对和绝对 Bootstrap

  jquery - 如何使元素在页面滚动时淡入？

  html - 为段落元素提供边距实际上并不适用于父 div

  CSS 一种引用以前的 div 样式以节省空间的方法？

  javascript - 将普通桌面菜单转换为选择选项菜单(适用于移动版本)

  html - 使用 css、jquery 创建轮廓

  php - 无法连接到Mysql数据库

  javascript - 将整个网站放在主登录页面的 iframe 中有什么缺点？

  css - 如何编辑特定页面的 html/css？

  html - 如何申请第一个 child :first-letter to only one section?

  ©2023 IT工具网  联系我们

  标签的“普通老式”水平表格。

Answer 1

一种选择是在这些 div 上使用 display:table-cell 规则:

.container1 > div {
    height: 100%;
    display: table-cell;
}

jsFiddle example