Sizing div to fit a child span
Sorry if everyone has already seen this over and over, I'm sure I've done it before but can't remember or find how!
I've got a parent div tag containing a series of span tags to position a series of elements in line with each other - to clarify, the 'in line' is critical and this is just a single row, multiple sequential rows are a requirement. Using position:relative or block level elements forces it onto a new line, which isn't any use. For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
</head>
<body>
<div style="position: relative; padding-top: 2px; padding-bottom: 2px;
background-color: Fuchsia;">
Hello world
<span style="position:relative; left: 80px;">
<input type="text" id="Test"/>
</span>
<span style="position: absolute; top: 2px; left: 350px; width:250px;
开发者_StackOverflow中文版 background-color:Lime;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
I promise those colours are just for testing to make things show up (and ditto the inline styling I promise) :-)
Unfortunately, the fuschia box won't size to fit around the lime. Ugly with one line, a major problem when you need two of these in sequence.
I've tried setting overflow on the parent div, which just hides all but the first line of the span. I've tried setting elements to clear in all sorts of places but none had any visible effect.
Could anyone tell me what I'm missing please? Thanks.
How about this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
<style type="text/css" media="screen">
#container {
position: relative;
padding-top: 2px;
padding-bottom: 2px;
background-color: Fuchsia;
float:left;
width: 100%;
}
#container > span {
float:left;
}
#greenbox {
width: 250px;
background-color:Lime;
}
</style>
</head>
<body>
<div id="container">
<span id="helloworld">Hello world</span>
<span id="inputbox">
<input type="text" id="Test"/>
</span>
<span id="greenbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
Try:
<div style="overflow: hidden; background-color: Fuchsia;">
<div style="float: left; margin-left: 10px;">Hello world,/div>
<div style="float: left; margin-left: 10px;">
<input type="text" id="Test"/>
</div>
<div style="float: left; width:250px; background-color:Lime;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus.
</div>
</div>
Change the margins and widths as necessary
Because the lime box is position: absolute, it is completely ignored when performing the layout. Therefore, the fuchsia box is sized as though the lime box didn't exist.
You need to change the fuchsia box to position: relative to make included in the layout logic, and add display: block to force its width. (Although it would be better to change it to a <div>, which already is display: block)
your "Lime" SPAN is absolutely positioned, so it is taken out of the page flow.
Try using float: left; instead.
Try changing the SPAN to display as a block element and position it relative to the container. It's the absolute positioning of the span that causes it to be removed from the rendering order and keeps the container from resizing around it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Positioning testing</title>
</head>
<body>
<div style="position: relative; padding-top: 2px; padding-bottom: 2px;
background-color: Fuchsia;">
Hello world
<span style="position:relative; left: 80px;">
<input type="text" id="Test"/>
</span>
<span style="margin-top: 2px; margin-left: 350px; width:250px;
background-color:Lime; display: block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
Oh, and by the way, I hope you're going to do this with stylesheets and classes once you get it nailed down. Also, you may need to give it a negative top margin to move it up relative to the top of the container.
I think you need is the fuchsia div to be "display: inline" to wrap around the inner content. ¿isn't that?
加载中,请稍侯......
精彩评论