Как заставить элемент div плавать из его контейнера, когда тег находится внутри контейнера - PullRequest
Новая
       2

Как заставить элемент div плавать из его контейнера, когда тег находится внутри контейнера

0 голосов
/ 25 февраля 2012

У меня есть контейнер внутри тела, этот контейнер имеет левые правые поля и ширину. Теперь внутри него есть div, который простирается по всей странице за пределами контейнера, но тег находится внутри контейнера. Как мне этого добиться.

Изображение для иллюстрации enter image description here

Ответы [ 5 ]

0 голосов
/ 25 февраля 2012

Вы просто даете внутреннему контейнеру отрицательное левое и правое поле.Он должен быть равен левому и правому краю внешнего контейнера.Попробуйте поиграть с этим примером (я дал внешнему div атрибут heigth, чтобы вы могли видеть, что происходит): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
    width: 600px;
    height: 400px;
    margin-right: 50px;
    margin-left: 50px;
    background-color: #F60;
}
#inner_div {
    background-color: #3399FF;
    margin-left: -50px;
    margin-right: -50px;
    width: 700px;
    position: relative;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="inner_div">test</div>
</div>
</body>
</html>
0 голосов
/ 25 февраля 2012

Если пространство слева и справа имеет фиксированную ширину, вы можете использовать отрицательные поля для внутреннего блока: 

.inner {margin: 0 -100px; position: relative; }

, где 100px - ширина пространства слева и справа отконтейнер.

position: relative обычно используется вместе с отрицательными полями, чтобы убедиться, что смещенные части блока видны.

0 голосов
/ 25 февраля 2012

Хотите что-нибудь подобное?

HTML: 

<div id="container">
    <div id="overflower">
        Overflow.
    </div>
</div>​

CSS: 

#container {
background: #f0f0f0;
width: 300px; 
margin: 0px auto;  
height: 300px;    
position: relative;
}

#overflower {
 width: 500px;
 position: absolute;
 left: -30%;
 top: 30%;  
 background: green; 
 text-align: center;
 color: white;   
}

http://jsfiddle.net/QwCq5/

0 голосов
/ 25 февраля 2012

Относительное позиционирование также будет работать, хотя это означает жесткое кодирование ширины полей: http://jsfiddle.net/H7YJR/

0 голосов
/ 25 февраля 2012

Попробуйте абсолютное позиционирование: 

#overflowing-bar {
    left: 0;
    position: absolute;
    right: 0;
}

Конечно, это будет работать, только если контейнер расположен статически.

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

Нет похожих вопросов

...