CSS 浮动的动态布局宽度

Question

我正在制作一个页面，该页面分为两个部分，左侧（70% 宽度）和右侧（30%）。这两列都包含来自数据库的动态内容。

我想要的是，当右侧部分的内容完成时，左侧部分应该占据所有宽度，即 100%。自身宽度的 70% 和右侧部分释放的 30%。这是我想要的图示：

如何仅使用两个 div 来实现这一点？即左 div 和右 div 百分比。

有人可能会建议我应该使用三个 div。一个 70%，在左边，30% 在右边，100% 在 divs 下面，但这不是我想要的，因为 divs 的动态内容。我想当右边 div 的内容完成时，左边 div 应该占 space 的 100%。右边的内容div可以是2行，也可以是100行，就是纯动态的。

这是我当前的 HTML 结构：

<div class='main'>
  <div class='left'></div>
  <div class='right'></div>
</div>

这是我的 CSS:

<style>
  .main  { width: 100%; }
  .left  { float: left; width: 70%; }
  .right { float: left; width: 30%; }
</style>

但这不起作用，使用此代码，在右侧内容完成后，左侧内容仍保留在 70% 以内。有什么建议吗？

Answer 1

使用 float first 方法。把mockup里的<div class='right'>移到左边div的上方，其实左边的div你想用就不需要了。

.right {
  float: right;
  width: 30%;
  height: 100px;
  background: yellow;
}

<div class='main'>
  <div class='right'>right</div>
  <div class='left'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
    <p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
  </div>
</div>

没有左边的例子div，结果同上

.right {
  float: right;
  width: 30%;
  height: 100px;
  background: yellow;
}

<div class='main'>
  <div class='right'>right</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
  <p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
</div>

Answer 2

我喜欢用

display: flex;

http://codepen.io/hesonline/pen/AXRGKd

单击右侧部分的 header 将其删除。

CSS 浮动的动态布局宽度

Dynamic layout width with CSS float

html

javascript

css

css-float