控制两个浮动div的宽度以相反的顺序显示，无论div中的内容的宽度如何

问题描述：

我想在页面上有两个浮动div，它们的组合宽度填充浏览器窗口的整个宽度。我想要一个div的固定宽度为15em并显示在左侧。我会将其称为侧栏div。我希望其他div动态地使用剩余的可用宽度，并显示在右侧。我将这称为主要内容分区。控制两个浮动div的宽度以相反的顺序显示，无论div中的内容的宽度如何

我想要主内容div的宽度来填充边栏div没有使用的所有可用宽度，并且即使主内容div中的内容都不需要所有可用内容宽度。

为了进一步复杂化，我希望主内容div在侧边栏div之前进行编码，但我希望侧边栏div在右侧的主内容div之前显示在左侧。这种复杂性使我的问题与我从其他用户在这里找到的其他类似问题不同。

我有一切正常运行的方式，除了在没有内容需要主内容div的全部可用宽度的页面上运行。例如，如果我在p中包含一行文本，因为它比可用宽度长，所以所有功能都按照需要运行。当ap中的文本行长度不足以利用主内容div可用的全部宽度时，主内容div只与其内容需要的一样宽，并且它挂在页面右侧，留下一个大的侧栏和主要内容divs之间的空白空间。

.right-main-content { 
 
    float: right; 
 
    text-align: left; 
 
    margin-left: 16em; 
 
    padding: 0; 
 
    background: red 
 
} 
 

 
.left-sidebar { 
 
    float: left; 
 
    text-align: left; 
 
    width: 15em; 
 
    margin-right: -15.5em; 
 
    background: green 
 
}

<body> 
 
    <div class="right-main-content"> 
 
    <p> 
 
     This is the right main content div. 
 
    </p> 
 
    <p> 
 
    </div> 
 
    <div class="left-sidebar"> 
 
    <p>this is the left sidebar div</p> 
 
    <p>with a fixed width of 15em</p> 
 
    </div> 
 
</body>

答

你可以在CSS使用calc和视口大小的版式设置在你的右边的div的宽度。

按你的例子试试这个：

.left-sidebar { 
    width:15em; 
    float:left; 
} 

.right-main-content { 
    width:calc(100vw - 16em); 
    float:right; 
}

这里是我创建了一个例子。 https://codepen.io/florinsimion/pen/eEYoeX

答

你可以尝试浮动只div.left-sidebar，使div.right-main-content一样div.left-sidebar宽度的保证金权值如下：

.right-main-content { 
    text-align: left; 
    margin-left: 15em; 
    padding: 0; 
    background: red; 
    width:100%; 
} 

.left-sidebar { 
    float: left; 
    text-align: left; 
    width: 15em; 
    background: green 
}

见https://jsfiddle.net/w0azuoLq/

答

我会建议使用的计算驱动width即父级的100%减去左边栏的15em宽度。这可以通过使用calc()来实现：

.right-main-content { 
 
    float: right; 
 
    width: calc(100% - 15em); 
 
    background: red; 
 
} 
 

 
.left-sidebar { 
 
    float: left; 
 
    width: 15em; 
 
    background: green; 
 
}

<body> 
 
    <div class="right-main-content"> 
 
    <p> 
 
     This is the right main content div. 
 
    </p> 
 
    <p> 
 
    </div> 
 
    <div class="left-sidebar"> 
 
    <p>this is the left sidebar div</p> 
 
    <p>with a fixed width of 15em</p> 
 
    </div> 
 
</body>

这样，所有你需要指定是两个width和float性能。

另请注意，您不需要text-align: left，因为它默认情况下是左对齐的。

希望这会有所帮助！ :)

控制两个浮动div的宽度以相反的顺序显示，无论div中的内容的宽度如何

相关推荐