0

问题：

我正在尝试使用彼此对齐 div，float:left但我无法让它工作。相反，它们彼此对齐。

PHP代码：

while ($row = mysql_fetch_assoc($result))
{
    $kriterium .= '<div style="float:left;">'.$i.'</div>';
    $betyg .= '<div style="float:left;">'.$row['RID'].'</div>';

    $mean += $row['RID'];

    $i++;
}

$meanvalue = round ($mean / ($i-1), 2);

$kriterium .= '<div style="float:left;"><b>Medelv&auml;rde</b></div>';
$betyg .= '<div style="float:left;"><b>'.$meanvalue.'</b></div>';

$html .= '
    <div class="table table-condensed table-bordered neutralize">
        <div>
            <b>Kriterium</b>'.$kriterium.'
        </div>
        <div>
            <b>Betyg</b>'.$betyg.'
        </div>
    </div>';

期望的输出：

在此处输入图像描述

问题：

需要修改的 CSS 代码有什么问题，以便 div 像彼此相邻的列一样对齐？

4

2 回答 2

2

您需要为每个 div 设置一个宽度。第一个 div 的宽度将比其他 div 的宽度宽。

<!DOCTYPE html>
<html>
  <head>
    <title>Kexx</title>
    <style type='text/css'>
    div.table-bordered > div  {
      width:420px;
    }
    div.table-bordered > div > div.c {
      width:94px;
    }
    div.table-bordered > div > div {
      float:left;
      width:24px;
    }
    div.table-bordered div {
      border:1px solid #333;
    }
    </style>
  </head>
  <body>
    <div class="table table-condensed table-bordered neutralize">
      <div>
        <div class='c'><b>Kriterium</b></div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <br style='clear:both;'/>
      </div>

      <div>
        <div class='c'> <b>Betyg</b></div>
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <br style='clear:both;'/>
      </div>
    </div>

  </body>
</html>

http://jsfiddle.net/Zv7Dp/

于 2012-06-15T09:17:30.590 回答
0

尝试将位置指定为相对，顺便说一句，如果你有一个单独的样式表，你可以定义一个类并将所有样式放在一个类下，无论如何我仍然更喜欢 html 表而不是这个，你可以找到尽可能多的 css 表样式通过谷歌搜索！

于 2012-06-15T09:13:00.523 回答