Question

我不确定如何使这项工作成为跨浏览者，所以我需要你的一些专业知识;）

如何制作看起来像这样的样式并以横向浏览器方式工作？（IE7也是）

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

红色框具有快速定义的宽度
绿色框位于红色框内的中心，并具有动态宽度+填充/边框
蓝色框是“鼠标悬停”div，需要与绿色框具有相同的宽度（没有填充/边框）

Answer 1

以下是实现此目的的一种方法（绿框的动态宽度）： 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）的浏览器。

在具有动态宽度的居中div内具有100％宽度的Div？

1 个答案:

修改