CSS浮动的动态布局宽度

debugcn 发表于 Dev

哈马德

我正在制作一个页面，其中页面分为两部分，左（70％的宽度）和右（30％）。这两个列都具有来自数据库的动态内容。

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

如何仅使用两个div来实现？即左股利和右股利与百分比。

可能有人建议我应该使用三个div。左侧的70％，右侧的30％和两个div下方的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％以内。有什么建议么？

贴纸

使用浮点优先方法。移动<div class='right'>在样机左格上面，其实，如果你想你将不再需要左格。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。