流体宽度和固定与列之间的边界在

-1

我有流体宽度左栏和固定宽度右栏。我需要在他们之间的边界，这是最高的专栏的高度。流体宽度和固定与列之间的边界在

这里是什么，我有简化的布局：

.left { 
    width: 100%; 
    float: left; 
} 
.left-inner { 
    margin-right: 275px; 
    padding-right: 30px; 
    border-right: 2px dotted #47718D; 
} 
.right { 
    float: left; 
    padding-left: 30px; 
    width: 275px; 
    margin-left: -275px; 
} 
<div class="left"> 
    <div class="left-inner"> 
     Content 
    </div> 
</div> 
<div class="right"> 
    Sidebar 
</div>

这里有一个更详细的小提琴：http://jsfiddle.net/meaLh

正如你所看到的边界停止在左栏的内容停止。两列都是可变的高度，所以有时候左侧的列会比右侧长。我怎样才能让这些东西平等，这样我就可以把边界放下去了？

来源

2014-01-12 jaypeg

我不明白，你是如何期待你的布局是，你看到了小提琴？ –

尝试改为使用display：table/table-cell和右边界上的第一个孩子 –

@ Mr.Alien我已经改写了最后一个段落 – jaypeg

* { 
    box-sizing: border-box; 
} 
.wrapper { 
    width: 100%; 
    max-width: 1260px; 
} 
.left { 
    width: 100%; 
    float: left; 
} 
.left-inner { 
    margin-right: 275px; 
    padding-right: 30px; 
} 
.right { 
    float: left; 
    padding-left: 30px; 
    width: 275px; 
    margin-left: -275px; 
    border-left: 2px dotted #47718D; 
}

来源

2014-01-12 15:40:27 artdias90

问题是有时候左列会比右列长，有时候相反，他们拥有动态内容。 – jaypeg

边界停止在左栏的内容停止，因为边界属性应用到左column.Similarly边框应用到右侧立柱将停在右列stops.Now如果内容您希望边框在内容下方移动，您可以在列底部使用一些填充。您也可以在左侧和右侧列之间使用第三列，其宽度非常小，并应用最小高度和边框。

来源

2014-01-12 16:03:57 user3186527

这些列具有动态内容，因此有时候留下的更长，有时候更长。这些解决方案只有在我知道确切的高度时才有用？ – jaypeg

流体宽度和固定与列之间的边界在

回答

相关问题