Question

问题：

我正在尝试使用float:left将divs彼此相邻，但我无法让它工作。相反，他们在彼此之间调整。

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

期望的输出：

enter image description here

问题：

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

Answer 1

您需要为每个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/

Answer 2

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

使用PHP中的float将divs彼此对齐

2 个答案: