Question

可能重复：
how to create a table layout with float in css

    #inner
{

 height:700px;

    }
div.content
{   
    float:left;
  width:95%;

}
    div.content span.first
    {
        display:block;
        float:left;
        width:25%;
        overflow:hidden;

    }
    div.content span.second
    {
        clear:both;
        display:block;
        float:right;
         width:25%;

    }
    div.content span.third
    {
        clear:both;
        display:block;
        float:right;
        width:25%;

    }
</style>

<body>

    <div id="outer">
          <div id="inner">
          <div class="content">
            <span class="first">
           HELLO
        </span>
       </div>

    <div class="content">
      <span class="second">
      pRERNA
          </span>
      </div>

   <div class="content">
      <span class="third">
      gOLANI
       </span>
    </div>

当使用像素工作但不是百分比为什么？我想创建三个相等宽度的列。如果外部元素是72％。我想创建72/3的cloumns，即宽度为24％。

Answer 1

您需要为父级设置宽度。无论是100％还是像素宽度，否则引擎都不知道从中获取％。

你也应该解释一下你的代码在做什么以及你希望它做得更好，这样更多的人可以提供帮助而你却不会得到投票：）

修改

考虑到你在这里展示的内容，你可能最终会让孩子们走出INNER家长。我会在你的样式表中添加一个clearfix只是google clearfix，你应该好好去。基本上它会在父节点的末尾添加一个伪元素，清除该元素，从而提供一个上下文，让你的孩子玩得很好。

css浮动宽度百分比

1 个答案: