Использование CSS Floats и проблемы с полями

Question

Это всегда ставило меня в тупик. И я всегда думал, что должен быть лучший способ сделать это.

Мне обычно приходится делать стиль = "margin-right 0px;" на последнем div, так что показывает все три. Но в идеале я бы хотел, чтобы это происходило без этой необходимости.

Как бы вы это сделали? (должен поддерживать IE7)

Пример кода следует за этим быстрым изображением, которое я создал, чтобы проиллюстрировать, чего я пытаюсь достичь изображение.

.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>