左边缘移位表扩展到父div以外

我在div中放置了一个表并将表宽设置为100％。我在div的表格左边放置了一个图标，因此我使用了margin-left属性来移动表格并使用position:absolute和top和left属性来放置图标。这一切都工作得很好，但是表格宽度被移出父div之外 - 显然是因为left-margin设置。因为我需要表根据浏览器窗口的宽度动态扩展，所以我不能只设置一个固定大小来将表保存在div内。最终，我可以将所有的div内容封装在一个表格中，并以这种方式布局元素，但是我希望通过调整CSS来更好，更简单的解决方案。谢谢！左边缘移位表扩展到父div以外

我想要实现：

|-margin-| 
+--------------------------------------------------------------------+ 
| (div) +---------------------------------------------------------+| 
|   | (table)             || 
|   |               || 
|   +---------------------------------------------------------+| 
+--------------------------------------------------------------------+

什么我越来越：

|-margin-| 
+--------------------------------------------------------------------+ 
| (div) +----------------------------------------------------------|-------+ 
|   | (table)             |  | 
|   |               |  | 
|   +----------------------------------------------------------|-------+ 
+--------------------------------------------------------------------+

更新：
感谢所有的建议。当我打出一个更长时间的回应时，我的回答就明白了。我认为width:100%意思是“填充但仍然在父元素的边界内”，而不是“假定父元素的指定宽度”。由于表上设置的margin-left:80px属性造成了所有的麻烦，我只是将其设置为padding-left:80px并解决了问题。

@Ace - 我真的不是“要求人们为我做所有的工作”。自从我描述了我所做的事情之后，我认为非常简单的CSS并不是必需的，但我认为它可能有帮助。所以这里，与工作的最后CSS一起：

原始CSS：

.mydiv { 
position:relative; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
margin-left:80px; 
}

最后CSS：

.mydiv { 
position:relative; 
padding-left:80px; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
}

来源

2012-03-13 randall

代码？不要求人们做所有的单词4你^^ – Ace 2012-03-13 22:01:56

由于左边距**和**你告诉它与div的宽度相同，所以它不在div中。它没有选择。 – Phrogz 2012-03-13 22:16:20

p.s. （如果有答案，则标记为答案） – Ace 2012-03-15 11:55:07

删除表的margin-left:80px并添加padding-left:80px到div容器：

.mydiv { 
position:relative; 
padding-left:80px; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
}

来源

2012-03-17 06:04:29 randall

如果使图标CSS背景图像在包装DIV，所有你需要的是在桌子上留下一些余量，一切都会好的。

来源

2012-03-13 22:04:18

或绝对定位图像而不是表格。 – Phrogz 2012-03-13 22:15:33

你不需要绝对定位任何东西。 – 2012-03-13 22:18:51

正确：TIMTOWTDI。 – Phrogz 2012-03-13 22:22:27

试试这个：

#tableID{ 
    left:100px; // the margin left 
    right:10px; 
}

它适用于div但对表没有尝试

来源

2012-03-13 22:04:47 Ace

所以，你对图标也一样。 – Ace 2012-03-13 22:06:10

左边缘移位表扩展到父div以外

回答

相关问题