代码之家 › 专栏 › 技术社区 › eftpotrm

调整DIV大小以适应子跨度

css html

eftpotrm · 技术社区 · 15 年前

很抱歉,如果每个人都已经一次又一次地看到了这一点,我肯定我以前做过,但我记不起来或找不到怎么做!

我有一个包含一系列跨距标记的父DIV标记来定位一系列元素,使它们彼此对齐——要澄清,行内是非常关键的,这只是一行,需要多个连续行。使用位置:相对或块级别的元素将其强制到一条新行上,这没有任何用处。例如:

<!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;
                     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>

我保证这些颜色只是为了测试,以使东西出现(和我保证的内嵌样式一样):-)

不幸的是,Fuschia盒的大小无法与石灰匹配。一行字难看,当你需要两行字的时候是个大问题。

我已经尝试在父DIV上设置溢出,它只隐藏范围的第一行以外的所有内容。我试过在所有地方设置元素以清除,但没有一个有任何可见的效果。

有人能告诉我我遗漏了什么吗?谢谢。

6 回复 | 直到 15 年前

S M 15 年前

这个怎么样?

<!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>

K Prime 15 年前

尝试:

<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>

根据需要更改页边距和宽度

SLaks 15 年前

因为石灰箱是 position: absolute ,执行布局时完全忽略。因此,紫红盒的大小就像石灰盒不存在一样。

你需要把紫红色的盒子换成 position: relative 使包含在布局逻辑中,并添加 display: block 强制其宽度。(尽管将其更改为 <div> ,已经是 显示:块 )

Stephen 15 年前

你的“石灰”跨度是绝对定位的,所以它是从页面流中取出的。

尝试使用float:left;代替。

tvanfosson 15 年前

尝试更改跨度以显示为块元素,并将其相对于容器进行定位。它是跨度的绝对位置,使其从渲染顺序中移除,并防止容器围绕其调整大小。

<!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>

哦,顺便说一句,我希望你能在样式表和类被确定之后,再这样做。另外,您可能需要给它一个负的上边距来相对于容器的顶部向上移动它。

xOneca 15 年前

我认为您需要的是紫红色的DIV作为“display:inline”来包装内部内容。不是吗?