Html 不禁用引导列浮动的底部对齐div

我想这可能是不可能的，但也许任何专家都能帮我解决这个问题。我试图让一个非常简单的反应行为起作用：

两列布局，徽标左侧，导航栏右侧。现在，对于较大的屏幕，导航栏应在第二列底部对齐，对于较小的屏幕，导航栏应浮动到徽标正下方的下一行

大屏幕：

小屏幕：

到目前为止，我想这只能用JS实现，但也许有人知道用纯CSS实现这一点的方法

HTML:

我已经用完整的代码设置了一个JSFIDLE：

---

非常感谢您的帮助。

如果您的元素的大小如示例中所示是固定的，您可以使用

填充顶部

，并在屏幕太小时将其删除（

xs:如果元素的大小像您的示例中那样是固定的，您可以使用
padding top
，当屏幕太小时将其删除（
xs:如果您知道徽标的确切高度，那么您可以使用媒体查询将padding top添加到较大屏幕上的#col2 div

平板电脑和更大的@media（最小宽度：778px）{…}

桌面和更大的@media（最小宽度：992px）{…}

大屏幕@媒体（最小宽度：1140px）{…}

Css示例

@media(min-width:992px){
  #col2{padding-top:70px;}
}

工作示例
如果您知道徽标的确切高度，则可以使用媒体查询在更大屏幕上的#col2 div中添加填充顶部

平板电脑和更大的@media（最小宽度：778px）{…}

桌面和更大的@media（最小宽度：992px）{…}

大屏幕@媒体（最小宽度：1140px）{…}

Css示例

@media(min-width:992px){
  #col2{padding-top:70px;}
}

工作示例
这里的问题是，列的高度不相等。CSS只提供了两个选项来平衡列的高度。CSS表格和Flexbox

您可以将浮动保持在原位，但是flexbox将在一定程度上覆盖浮动

然而，根据您的需求，影响可能是最小的



#徽标{
背景色：红色；
高度：100px；
宽度：150px；
颜色：白色；
}
#导航栏{
背景颜色：蓝色；
高度：30px；
宽度：100%；
颜色：白色；
}
.行{
显示器：flex；
柔性包装：包装；
}
#可乐{
显示器：flex；
对齐项目：柔性端；
}

标志
导航栏：选项卡1 |导航选项卡2 |导航选项卡3
这里的问题是，列的高度不相等。CSS只提供了两个选项来平衡列的高度。CSS表格和Flexbox

您可以将浮动保持在原位，但是flexbox将在一定程度上覆盖浮动

然而，根据您的需求，影响可能是最小的



#徽标{
背景色：红色；
高度：100px；
宽度：150px；
颜色：白色；
}
#导航栏{
背景颜色：蓝色；
高度：30px；
宽度：100%；
颜色：白色；
}
.行{
显示器：flex；
柔性包装：包装；
}
#可乐{
显示器：flex；
对齐项目：柔性端；
}

标志
导航栏：选项卡1 |导航选项卡2 |导航选项卡3
将col-2的高度设置为类似于徽标的高度，并将导航栏设置为绝对位置和底部0。使用此解决方案替换css

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

#col1 {
  //border: 1px solid darkred; padding: 0px; 
}
#col2 {
  //border: 1px solid darkblue; padding: 0px;
}
#logo {
  background-color: red; height: 100px; width: 150px; color: white; padding: 5px;
}
#navbar {
  background-color: blue; height: 30px; width: 100%; color: white; padding: 5px;
}

@media only screen and (max-width : 992px){
 #navbar{
       position: absolute;
      bottom: 0px;
 }
 #col2{
   height: 100px;
 }
}

@media only screen and (max-width : 768px){
 #navbar{
       position: relative;
 }
 #col2{
   height: auto;
 }
}

将col-2的高度设置为与徽标类似，并将导航栏设置为绝对位置和底部0。使用此解决方案替换css

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

#col1 {
  //border: 1px solid darkred; padding: 0px; 
}
#col2 {
  //border: 1px solid darkblue; padding: 0px;
}
#logo {
  background-color: red; height: 100px; width: 150px; color: white; padding: 5px;
}
#navbar {
  background-color: blue; height: 30px; width: 100%; color: white; padding: 5px;
}

@media only screen and (max-width : 992px){
 #navbar{
       position: absolute;
      bottom: 0px;
 }
 #col2{
   height: 100px;
 }
}

@media only screen and (max-width : 768px){
 #navbar{
       position: relative;
 }
 #col2{
   height: auto;
 }
}

当您知道元素的高度时，就不需要使用flexbox，但是您的代码可以做到这一点，只有在支持flexbox@ustmaestroOP是否表示元素的高度已知？请看示例徽标和导航栏高度已知；）这是一个例子…OP没有说高度是已知的。确实，高度是已知的，只有div2的宽度需要灵活。我想这已经用Mistalis响应解决了。谢谢你的支持。当你知道元素的高度时，没有必要使用flexbox，但你的代码会做到这一点，只有在支持fl的现代浏览器中exbox@ustmaestroOP是否表示元素的高度已知？请看示例徽标和导航栏高度已知；）这是一个例子…OP没有说高度是已知的。确实，高度是已知的，只有div2的宽度需要灵活。我想这已经用Mistalis响应解决了。谢谢你的支持。非常好，现在完全忘记了媒体查询。谢谢你的支持。非常好，完全忘记了媒体查询这一点，谢谢你的支持。
/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

#col1 {
  //border: 1px solid darkred; padding: 0px; 
}
#col2 {
  //border: 1px solid darkblue; padding: 0px;
}
#logo {
  background-color: red; height: 100px; width: 150px; color: white; padding: 5px;
}
#navbar {
  background-color: blue; height: 30px; width: 100%; color: white; padding: 5px;
}

@media only screen and (max-width : 992px){
 #navbar{
       position: absolute;
      bottom: 0px;
 }
 #col2{
   height: 100px;
 }
}

@media only screen and (max-width : 768px){
 #navbar{
       position: relative;
 }
 #col2{
   height: auto;
 }
}