CSS float

Question

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

我想要的是，当右侧部分的内容完成时，左侧部分应采用所有宽度，即100％。 70％自己的宽度和30％由右侧部分释放。这是我想要的图形表示：

如何仅使用两个div实现此目的？即div和right div的百分比。

有人可能会建议我使用三个div。一个70％，左边是30％，右边是100％，但是由于div的动态内容，这不是我想要的。我想当正确的div的内容完成时，左div应占用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方法。移动模型中左侧div上方的<div class='right'>，实际上，如果需要，您不会需要左侧div。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

没有左div的示例，结果与上面相同。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我喜欢用

display: flex;

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

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