Question

这一直困扰着我。我一直认为必须有更好的方法来做到这一点。

我通常最终不得不做一个style =“margin-right 0px;”在最后一个div上，所以它显示了所有三个。但理想情况下，我希望在没有这种需要的情况下实现这一目标。

你会怎么做？（必须支持IE7）

示例代码遵循我创建的这个快速图像，以说明我想要实现的目标。图像。

lay out example

.container {
    width: 400px;
}

.container div {
    width: 100px;
    float: left;
    margin-right: 50px;
}

.container a {
    display: block; 
}

.clearfloats {
    clear: both;    
}

</style>

<div class="container">

    <div><img src="someimage.jpg" /><a href="#">some link</a></div>
    <div><img src="someimage.jpg" /><a href="#">some link</a></div>
    <div style="margin-right: 0px;"><img src="someimage.jpg" /><a href="#">some link</a></div>
    <br class="clearfloats" />

    <div><img src="someimage.jpg" /><a href="#">some link</a></div>
    <div><img src="someimage.jpg" /><a href="#">some link</a></div>
    <div style="margin-right: 0px;"><img src="someimage.jpg" /><a href="#">some link</a></div>
    <br class="clearfloats" />

</div>

Answer 1

IE7支持第一个子伪选择器，虽然有些错误。

如果向左浮动，并使用它来擦除任何左边距，它应该工作。您还可以使用：after伪选择器在行除法后清除浮点数。

<div class="container">

    <div class="holder">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="holder">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

</div>

使用以下CSS：

.container {
    width: 400px;

    background: #505050;
}

.holder:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.item {
    float: left;
    margin-left: 50px;

    width: 100px;
    height: 100px;

    background: #202020;
}

.item:first-child {
    margin-left: 0;
}

http://jsfiddle.net/8h3zr/提供演示。

Answer 2

我认为更好的方法是在.contanier之后和div之前添加一个新标签。

例如：

<style>
.container {
    width: 400px;
    overflow:hidden;
}

.subContainer{
    width:460px;
}

.container div {
    width: 100px;
    float: left;
    margin-right: 50px;
}

.container a {
    display: block; 
}

.clearfloats {
    clear: both;    
}

</style>

<div class="container">
    <div class="subContainer">
        <div><img src="someimage.jpg" /><a href="#">some link</a></div>
        <div><img src="someimage.jpg" /><a href="#">some link</a></div>
        <div><img src="someimage.jpg" /><a href="#">some link</a></div>
        <br class="clearfloats" />

        <div><img src="someimage.jpg" /><a href="#">some link</a></div>
        <div><img src="someimage.jpg" /><a href="#">some link</a></div>
        <div><img src="someimage.jpg" /><a href="#">some link</a></div>
        <br class="clearfloats" />
    </div>
</div>

Answer 3

我认为，最简单的方法是做到这种与IE7兼容的东西仍然是......桌子。它在标记方面不是最好的，但你可以保证它会正确布局。

<table>
  <tr>
    <td>
      <img src="someimage.jpg" /><a href="#">some link</a>
    </td>
    <td>
      <img src="someimage.jpg" /><a href="#">some link</a>
    </td>
    <td>
      <img src="someimage.jpg" /><a href="#">some link</a>
    </td>
  </tr>
  <tr>
    <td>
      <img src="someimage.jpg" /><a href="#">some link</a>
    </td>
    <td>
      <img src="someimage.jpg" /><a href="#">some link</a>
    </td>
    <td>
      <img src="someimage.jpg" /><a href="#">some link</a>
    </td>
  </tr>
</table>

使用CSS Floats和边距问题

3 个答案: