Problem with CSS Element width
When I create a div, its width is nearly 90% of the scree开发者_开发技巧n, but I want it to be minimal size it should be. How can I fix it with CSS? Any ideas?
If you float the div to the left or right, and display it as a block, then it will only be the width it needs to be.
float: left;
display: block;
Then you can also give it a width. The reason yours is "nearly 90%" is because by default, there will be padding/margins on the elements.
Can we see your code? If you want to remove the block-qualities of a div all you have to do is add display:inline-block to that div and it should just take up the space it carries.
You could use display: inline-block on the <div>, but that isn't supported by IE7 and earlier except on natively inline objects.
The width of any element will depend on the width of its parent element (except pixels). It might have been that you set width on each of its parent elements that you ended up being confused on the child element's box model. If no width is specified on the child element, then it will inherit the width of its parent element.
For example:
Markup Code:
<html>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
CSS Code:
body {
width: 960px;
}
.outer {
width: 75%;
}
.inner {
width: 50%;
}
Details:
In the above example, you might think that <div class="inner">'s width (which is 50%) will adjust according to the <body>'s width (which is 960px).
However, that will not happen, because we already adjusted its parent element: <div class="outer"> (which is 75%). So what really happened is that <div class="inner"> is adjusting its width according to <div class="outer">'s width not <body>'s.
<div class="inner">'s final width computation:
<body>(960px) *<div class="outer">* (0.75) =<div class="outer">'s final width (720px)<div class="outer">(720px) *<div class="inner">(0.50) =<div class="inner">'s final width (360px)
加载中,请稍侯......
精彩评论