Div со 100% шириной внутри центрированного div с динамической шириной? - PullRequest
Новая
       21

Div со 100% шириной внутри центрированного div с динамической шириной?

1 голос
/ 07 марта 2012

Я не уверен, как сделать эту работу кросс-браузерной, поэтому мне нужны некоторые ваши знания;)

Как мне сделать стиль, который выглядит следующим образом и работает кросс-браузерно? (Также IE7)

http://imageshack.us/photo/my-images/543/examplek.jpg/

  • Красная рамка имеет быструю заданную ширину
  • Зеленый прямоугольник центрируется внутри красного прямоугольника и имеет динамическую ширину + отступ / рамка
  • Синяя рамка - это div "mouseover", ширина которого должна быть равна ширине зеленой рамки (без отступов / рамки)

1 Ответ

1 голос
/ 07 марта 2012

Вот один из способов достижения этого (с динамической шириной для зеленой рамки): http://jsfiddle.net/nKdt6/

HTML 

<div class="outer">
    <div class="inner">
        <p>
            lorem ipsum
        <p>
        <div>
            <p>Blah blah blah</p>      
        </div>   
    </div>
</div>

CSS 

.outer {
    background-color : red;
    text-align: center;
    width: 500px;
}

.inner {
    background-color: lime;
    border: 3px black solid;
    display: inline-block;
    padding: 20px;
    *display: inline;
    *zoom: 1;
    position: relative;
    margin: 100px 0;
    border-radius: 10px;
    overflow: hidden;        
}

.inner > div {
    display: none;
    background-color: aqua;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;  
}

.inner:hover > div {
    display: block;   
}

Для центрирования элемента. inner, когда он имеет динамическую ширину, мы можем использовать text-align: center в .outer и display: inline-block в .inner. Я добавил дополнительные CSS *display: inline и *zoom: 1, чтобы это работало в IE7, так как он не поддерживает display: inline-block.


Редактировать

Чтобы получить тонкий черный контур (внешнюю границу) вокруг широкой белой внутренней рамки (как это было продемонстрировано @DonPedro в комментариях ниже), вы можете добавить вторую рамку к внутреннему дочернему элементу, который контролирует полную высоту и ширина родительского элемента. В приведенном выше примере это .inner > p.

CSS 

.inner {
    ...
    border: 1px black solid; 
    ...
}

.inner > p {
    ...
    border: 10px solid white;
    ...
}

Рабочая JSFiddle: http://jsfiddle.net/nKdt6/1/ (предоставлено @DonPedro)

Этого нельзя добиться с помощью outline из-за стиля border-radius, и, насколько мне известно, Mozilla - единственный браузер, который поддерживает любой тип радиуса контура (-moz-outline-radius).

...