CSS: Parent-Div does not grow with it's children (horizontal)
I would like the parent-div (red) to grow with the green child-div. Now it just stops at the viewport.
开发者_高级运维<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
* {
font-family: verdana;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>
I don't want to use display:table; since it does not work well in IE.
Any ideas?
Use display: inline-block; on the parent <div> and it will work as expected
Make the parent div float:left; and it will be expanded as desired.
I know I'm late, but here's what I do to fix the problem:
Add the clear INSIDE the parent at the bottom, and make the parent overflow: hidden.
Here's the modified code:
.clear{
clear: both;
/* make sure there is no height set to it */
line-height: 0;
height: 0;
font-size: 0em;
}
<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
<div class="clear">/div>
</div>
Works in FF3 and IE7, but not tested in other browsers though.
Hope to, at least, help you with your problem.
Use display:table; on the parent div. Or you can put the parent div into a cell of a table.
There's too much complicated advice here. Here's a tip: instead of tinkering with table-cells, and clear and floats, just make sure the child has a border that's equivalent to the padding you were looking for the parent. Borders are always drawn outside, so it'll do what you want.
This should work...
<div style="margin: 30px; background: red;">
<div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>
...in all browsers, without a problem. HTH.
See this solution from quirksmode.org. It's pretty simple, just apply this class to the container/parent div:
div.container {
overflow: hidden;
width: 100%;
}
加载中,请稍侯......
精彩评论