Как скрыть это переполнение?

Question

Ниже приведен пример макета, который я пытаюсь достичь.Единственная проблема заключается в том, что я хочу скрыть переливающуюся часть синей рамки, не испортив остальную часть макета.Любой берущий?http://jsfiddle.net/seB5F/27/

Answer 1

Это нормально?http://jsfiddle.net/simevidas/seB5F/33/

Вы должны удалить position:absolute.
Я использую display:inline-block + white-space:nowrap вместо float.

Улучшенная демонстрация с font-size:0 hack: http://jsfiddle.net/simevidas/seB5F/34/

Answer 2

Как на счет этого http://jsfiddle.net/seB5F/32/

Answer 3

По вашему css

#stretchable-div{
    background:blue;
    position: absolute;
     width:200px;
}

Answer 4

В дополнение к ответу, который дал @vicTROLLA, вы можете использовать javascript, чтобы получить ширину красного поля, затем установить ширину контейнера для синих полей (stretchable-div или что-либо еще), а затем установить переполнение на этом контейнере скрыто.

Таким образом, либо вы используете relative, чтобы заставить его действовать так, как будто он находится внутри этого красного прямоугольника (может испортить положение), либо вы используете JS, чтобы установить правильные стили для этого синего контейнера после визуализации красного цвета. обратите внимание, если вы установите ширину контейнера, он автоматически попытается обернуть внутренние поля ниже. Возможно, вы также захотите использовать некоторые вычисления или жестко запрограммированное число для установки высоты.

Например, чтобы ваш CSS выглядел так:

#stretchable-div {
   background: none repeat scroll 0 0 blue;
   height: 60px;
   overflow: hidden;
   position: absolute;
   width: 200px;
}

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

Answer 5

Ваш атрибут CSS для этого div является «абсолютным». Вы, вероятно, хотите что-то вроде «родственник.