1. 首页
  2. 问答
  3. 如何使div延伸至其容器允许的范围内？

如何使div延伸至其容器允许的范围内？

2011-03-17 41 views
0

你好所以我想知道你能否真正帮助我。如何使div延伸至其容器允许的范围内？

目前在我的文档发生这种情况：

http://i.stack.imgur.com/tCkDk.png

但是，相反，我希望这种情况发生：

http://i.stack.imgur.com/CBCWZ.png

我试图寻找到使红色div的高度与其父母一样，但我无法弄清楚如何做到这一点。有任何想法吗？

来源

2011-03-17 Anderson Smith

+0

添加一些HTML代码，所以我可以告诉你。 – Neal 2011-03-17 20:24:18

回答

1

float:left你的形象，然后使用一些保证金左为您的文字。

你可以看到一个演示there

来源

2011-03-17 20:25:43 Haza

+0

谢谢，保证金左侧解决了问题！随着浮动左，我的div的宽度减少到只适合内容，这是不可取的。 – 2011-03-17 20:35:07

1

在两个div使用float: left和float: right :-)

来源

2011-03-17 20:24:02 Neal

0

如何用div的下边距（边距）玩？

来源

2011-03-17 20:24:26 Danish

0

有几个方面，取决于你如何画的框。您可以使用几个像素的填充，或者也可以选择一个容器div，向左浮动，高度为100％，并且框的div /图像向左浮动。 ，或者如上所述，将左边的div浮动到左边，右边的文本浮动到右边。

来源

2011-03-17 20:27:11 MCannon

1

不使用浮动的方法是使用display: inline-block。以下内容也将在IE7 +中运作！ （应用此风格两个元素）：

 
selector 
{ 
    display: inline-block; // For real browsers 
    zoom: 1;    // For useless, maddeningly crap browsers 
    *display: inline;  // For useless, maddeningly crap browsers 
}

Here is a link什么我关于。唯一的小问题是你必须在你的文本元素上指定一个宽度。它比浮动要好 - 它保持元素流入，这意味着布局更容易。

来源

2011-03-17 20:31:03 Bojangles

0

原谅长上下的样本：

<html> 
<head> 
<title>Div Test</title> 
</head> 
<style type="text/css"> 

#wrap { 
    width: 200px; 
} 

#redbox { 
    height: 45px; 
    width: 45px; 
    background-color: Red; 
    border: 5px solid black; 
    margin-right: 10px; 
    display: inline-block; 
    float: left; 
} 

#textbox { 
    font-weight: bold; 
    font-size: 20px; 
    display: inline-block; 
} 

</style> 
<body> 
    <div id="wrap"> 
     <div id="redbox"></div> 
     <div id="textbox"> 
      Lorem ipsum dolor sit amet, 
      consectetur adipisicing elit. 
     </div> 
    </div> 
</body> 
</html>

来源

2011-03-17 20:35:57

相关问题

 相关问题