1

我的网页在 Firefox 中运行良好。但在 IE 中它不能正确包装。

两列的父 div 是：

.underbars
{
    left:0;
    right:0;
    top: 140px;
    position: absolute;    
}

在这个 div 中有 2 个 div，一个是浮动的，另一个应该直接位于浮动 div 的右侧，第二个 div 不浮动的原因是因为我希望它占用剩余的空间。在 IE 中，第二个 div 位于第一个 div 的正下方。

浮动 div：（应该在左侧）

.cabinetpane
{

    border-right: 1px solid #c1c0c1;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-color: #c1c0c1;
    border-bottom-color: #c1c0c1;    
    font-size: 12px;
    color: #3B4F65;
}

包装 div （应该直接在右边并占用所有可用空间）

<div> </div> //No css for this one
4

2 回答 2

2

我能想出的最佳解决方案是有一个 div 具有对齐事物的单一目的（它仅用于结构，不显示颜色/边框）。

这是盒子模型： 在此处输入图像描述

我正在谈论的那个 div 是你想要“占用剩余空间”的那个，也就是橙色框。在该 div 内部应用了一种样式，该样式指示，该 div 将有一个 margin-left （这个边距应该与您拥有的 float-left 列一样宽），以便当另一个 div 放置在内部并给定 width:100% 时，在在这种情况下，蓝色 div（由于填充和边框等原因，我给了它 90。您需要根据您拥有的边框/边距/填充来摆弄它）蓝色 div 将始终占据其余空间。

用颜色来概括：

  • 黑色 = 固定的左列 div
  • 橙色 = 用于结构的 div（不应有边框/背景等）
  • 贪婪 = 橙色 div 上使用的左边距的隐喻表示
  • blue = 填充右侧空间的 div。

PS我在IE8中测试过

你可以在这个 jsfiddle中找到所有的 css/html ，每次你发布 CSS/js/HTML 相关问题时，我建议使用JSFIDDLE ，一张图片绘制 1000 个单词。

于 2012-07-07T00:26:22.707 回答
0

如果您要尝试的是 Lyuben Todorov 所说的，那么这样的事情会起作用：

<style>
.col1 { width:250px; float:left }
</style>

<div class="col1">
I'm 250
</div>
<div class="col2">
I'm as long as you want me to be, just don't define me! 
</div>

...如果这就是我认为你现在所说的

于 2012-07-06T23:56:59.520 回答