Скругление / переполнение пикселей в браузере CSS скрыто с процентами

Question

Я пытаюсь создать масштабируемый макет сетки с помощью CSS, и я столкнулся с двумя проблемами, которые сводят меня с ума, поэтому любая помощь очень ценится

1) У меня есть div с шириной, установленной на 100% (со скрытым переполнением), поэтому он покрывает все окно браузера, а внутри div, который я пытаюсь поместить, скажем, 5, div один рядом с другим с шириной 20% но последнее, что я хочу, чтобы это было немного шире (21%). Несмотря на то, что переполнение скрыто в родительском контейнере, последний div оборачивается ниже остальных четырех, а не остается в той же строке. Я понимаю, что это происходит потому, что совокупная ширина дочерних элементов div больше, чем родительского элемента div, но разве это не будет предотвращено с помощью скрытого переполнения?

2) Вторая проблема, которая у меня есть, связана с первой. У меня есть последний div, например 21%, потому что, если я оставлю это до 20%, чтобы уместить контейнер, при изменении размера окна в правом конце страницы появится небольшой пробел. Это происходит в браузерах webkit только благодаря тому, как они обрабатывают округление пикселей.

Я пытаюсь найти способ решить эту проблему, но безуспешно. Чего я хочу добиться, так это иметь несколько элементов div один рядом с другим, которые будут охватывать всю ширину браузера и продолжать делать это даже при изменении размера.

Я нашел способ обойти это, используя javascript для изменения размера последнего div, когда изменение размера заканчивается, но должен быть более правильный способ сделать это, или только с помощью CSS?

Answer 1

При присвоении последнему элементу следующих свойств он будет занимать всю оставшуюся ширину контейнера:

#grid > *:last-child {
    float:    none;
    overflow: hidden;
    width:    auto;
}

Это упрощенная версия инфраструктуры OOCSS. Полный тестовый пример и ссылки доступны в демоверсии ниже:

http://codepen.io/barneycarroll/pen/cAykE

Answer 2

Я думаю, что использование margin-right:-1px; может быть лучшим решением проблемы, которая в основном делает ширину макета изображения 20%, но его видимая ширина все еще составляет 21%.

HTML

<div id="grid">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
</div>

CSS

#grid {width:100%;height:100px;}
#grid > div {width:20%;height:100px;float:left;}
#grid > div:last-child {width:21%;margin-right:-1%;}
.a {background-color:#F00;}
.b {background-color:#F33;}
.c {background-color:#F66;}
.d {background-color:#F99;}
.e {background-color:#FBB;}

http://jsfiddle.net/ER7ML/1/

По причине overflow:hidden; не работает, это не 'не прерывать, как выложена страница.Вы можете использовать следующее решение, которое говорит, чтобы скрыть переполнение на внутреннем div, который имеет width:101%.Однако я не думаю, что это так хорошо, как предыдущее решение.

HTML

<div id="outer">
  <div id="grid">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
  </div>
</div>

CSS

#outer {width:100%;height:100px;}
#grid {width:101%;}
#grid > div {width:20%;height:100px;float:left;}
#grid > div:last-child {width:21%;}
.a {background-color:#F00;}
.b {background-color:#F33;}
.c {background-color:#F66;}
.d {background-color:#F99;}
.e {background-color:#FBB;}

http://jsfiddle.net/yUPh7/1/

Answer 3

Вы можете попробовать что-то вроде этого.

CSS

body, html, div {
    margin:0px;
    padding:0px;
}

.main {
    width:100%;
    height:100px;
    background-color:#000000;
    position:relative;
    overflow:hidden;
}

.col1, .col2, .col3, .col4, .col5 {
    position:absolute;
    top:0px;
    width:20%;
}

.col1 {
    left:0px;
    background-color:#ff0000;
}

.col2 {
    left:20%;
    background-color:#ffcc00;
}

.col3 {
    left:40%;
    background-color:#00ff00;
}

.col4 {
    left:60%;
    background-color:#0000ff;
}

.col5 {
    left:80%;
    width:21%;
    background-color:#cc00ff;
}

HTML

<div class="main">
    <div class="col1">div 1</div>
    <div class="col2">div 2</div>
    <div class="col3">div 3</div>
    <div class="col4">div 4</div>
    <div class="col5">div 5</div>
</div>