1

我正在疯狂地尝试完成这项工作，这就是我试图完成的结果：

在此处输入图像描述

    <div style="float: left;width:400px;border:1px;">
        <span><img src="" style="width: 60px;height: 60px;" /><br />SQL Server 2005</span>
        <span><img src="" style="width: 60px;height: 60px;" /><br />SQL Server 2008</span>
        <span><img src="" style="width: 60px;height: 60px;" /><br />Ruby on Rails</span>
    </div>

只是想不通，有人会猜吗？

4

3 回答 3

2

这应该做你想要的：

<div style="width:400px;border:1px;">
   <div style="width:120px; float:left; text-align:center;">
        <img src="" style="width: 60px;height: 60px;" />
        <br/>
        <span>SQL Server 2005</span>
    </div>
    <div style="width: 120px; float:left; text-align:center;">
        <img src="" style="width: 60px;height: 60px;" />
        <br/>
        <span>SQL Server 2008</span>
    </div>
    <div style="width: 120px; float:left; text-align:center;">
        <img src="" style="width: 60px;height: 60px;" />
        <br/>
        <span>Ruby on Rails</span>
    </div>
</div>
于 2012-10-05T02:34:27.047 回答
1

HTML：

<div id="row">
    <span><img src="" /><br />SQL Server 2005</span>
    <span><img src="" /><br />SQL Server 2008</span>
    <span><img src="" /><br />Ruby on Rails</span>
</div>

CSS：

div#row {
  overflow: hidden; /*This is a clearfix because all it's children are floated*/
  width: 400px;
  border: 1px solid #000000;
}

div#row span {
  display: block;
  float: left;
  width: 60px;
  margin: 0 36px;
}

div#row span img {
  display: block;
  width: 58px;
  height: 58px;
  border: 1px solid #000000;
}
于 2012-10-05T02:19:41.673 回答
0

浮动剩下的所有跨度，此刻它们都在彼此下方。

于 2012-10-05T02:18:38.843 回答