Question

我是HTML和CSS以及Stack Overflow社区的新手，对于我的任务之一，我需要在容器<div>中将多个<div>放在一起。我为每个内部float:left使用<div>。但是当我这样做时，外部（容器）div一直坍塌到顶部。我所了解的是浮动元素被移出正常的内容流，并且它们之后的任何元素都被放置在正常流中。
我需要了解浮动元素的工作方式以及display:inline-block。任何帮助将不胜感激。最简单形式的示例标记如下所示：

<style>
 #xouter{
    width:80%;
    margin-left:9%;
    border:1px solid #000;
}
#xleftcol{
    float: left;
    width: 33%;
    background:#809900;
}
 #xmiddlecol{
    float: left;
    width: 34%;
    background:#eff2df;
}
#xrightcol{
    float:left;
    width: 33%;
    background:#d2da9c;
}
</style>
    <body>
       <div id="xouter">
          <div id="xleftcol">
          This is the left col : This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col 
          </div>
          <div id="xmiddlecol">
          This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: 
          </div>
          <div id="xrightcol">
              This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol ::
          </div>
        </div>

    </body>

This is a screen shot of what I have: 1- 3 divs with no floating or display property set 2- the same divs but with float-left property 3- lastly, with display:inline-block property (no floating property)

Answer 1

您想要使用float:left/right或display:inline-block，而不是两者。

将CSS中的三条float:left行更改为display:inline-block，它应该会为您提供所需的结果。

编辑：Michael Coker正确地指出您的CSS中的ID与CSS中的.classname不匹配。

Answer 2

在CSS中，需要用井号替换句号。一个时期是指一个阶级。英镑符号表示ID。您的标记使用ID，但您将它们作为CSS中的类引用..

理解div和的行为

2 个答案: