Переполнение CSS: принудительно переполняет один div

#html #css

#HTML #css

Вопрос:

Возможно ли, чтобы только определенный элемент переполнял родительский div?

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

Смотрите http://sandbox.pixelcraftwebdesign.com/engineering и выполните некоторые вычисления со случайными числами.

Маленькое красное число в верхнем правом углу должно находиться над выходным div и за его пределами.

1. Я бы предположил, что jQuery мог бы помочь. Пожалуйста, опубликуйте какой-нибудь код.

2. 1 некоторый код мог бы помочь.

3. Эта страница запущена в режиме quirks. Переведите его в стандартный режим, чтобы получать согласованные результаты во всех браузерах.

4. Если вы хотите, чтобы это маленькое красное окошко полностью отсутствовало в окне вывода, просто удалите position:relative; из выходного div, и окно должно всплывать сразу. Но поскольку в нем используются причуды, как сказал @gilly3, это может сработать, а может и не сработать для вас. У меня это сработало с помощью инструмента проверки chrome.

5. Ваш doctype управляет вашим режимом рендеринга (причуды или стандарты). В вашем файле указан HTML3.2, который переводит ваш документ в режим quirks. Существует множество способов кодирования вашего doctype. Вот достойная статья: alistapart.com/articles/doctype . Но я предпочитаю, чтобы он был коротким и приятным. Этот краткий синтаксис сохранит ваш документ в стандартном режиме: <!DOCTYPE html>

Ответ №1:

не совсем уверен, что вам нужно, но вот скрипка, демонстрирующая определенный дочерний div, плавающий снаружи, и отображающий все его содержимое:http://jsfiddle.net/dcpDa

 <div id="parent">
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="doShow">Okay, Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
    <div class="dontShow">Dont Show All Of Me</div>
</div>

CSS:

 div { 
    width: 5em; /*constrain div */
    height: 1em; 
    border: 1px solid #aaa; 
    background-color: #ccc;
}
.dontShow { overflow: hidden; } /* do not show overflow */

.doShow { 
    width: auto; /* over ride constraints and show all */
    height: auto;  
    position: absolute; /* break from flow */ 
    left: 15em; /* position where you want */
}

Вот две статьи о позиционировании CSS, которые я недавно нашел полезными:
css плавает 101
Позиционирование Css 101

Ответ №2:

Если элемент, который вы хотите переполнить, является текстом, самым простым решением является :

 .nowrap {
    white-space: nowrap;
}

Вот скрипка:https://jsfiddle.net/Flyout/dgh2erqj

Ответ №3:

Предполагая, что вы хотите, чтобы ширина оставалась неизменной:

Удалить overflow:hidden из .output .
Установите .output .right на width:257px;overflow:hidden .
Установите .result-rh, .result-temp на width:241px .

Это исправление допускает переполнение контейнера, но скрывает переполнение с правой стороны. Это также придает правой стороне соответствующий размер, чтобы предотвратить обрезку результирующих интервалов.

У меня работает в Firefox 3.6.17. Должно работать и в других браузерах.

Ответ №4:

Используйте position: absolute; для дочернего элемента, который вы хотите показать. Затем вы можете использовать top , left , height и width , чтобы расположить его там, где вы хотите.