css 具有纯CSS的等大小列。使用底部填充边距技巧,通过overflo将过度折叠元素切割成适当的大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 具有纯CSS的等大小列。使用底部填充边距技巧,通过overflo将过度折叠元素切割成适当的大小相关的知识,希望对你有一定的参考价值。

 <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

以上是关于css 具有纯CSS的等大小列。使用底部填充边距技巧,通过overflo将过度折叠元素切割成适当的大小的主要内容,如果未能解决你的问题,请参考以下文章

CSS 使用百分比和边距、填充或边框

CSS 表格 - 添加边距列和行边框底部

css 表单 - 边距/填充问题 - 包括代码和图像

具有填充和边距以及 100% 宽度的 HTML CSS 框? [复制]

响应式 div 宽度结合固定宽度 div 纯 CSS

UL中的CSS垂直滚动条向左/向右填充可能吗?