Html 如何在具有可变高度的流体布局中定位元素死点？_Html_Css_Layout_Fluid Layout

Html 如何在具有可变高度的流体布局中定位元素死点？

html css layout

Html 如何在具有可变高度的流体布局中定位元素死点？,html,css,layout,fluid-layout,Html,Css,Layout,Fluid Layout,需要将位于div死点内的框定位到wrapper div，其中wrapper div的高度取决于边栏div的高度。div中的框相对于包装器div被绝对定位，并设置了一个可变的宽度和高度，该宽度和高度与其中的图像和内容相对应这可以通过为div内的框指定宽度和高度来实现，但必须与可变宽度和高度有关。（div内的框必须与带填充的img的尺寸相同） JSFIDLE代码这是HTML代码： <body> <div class="wrapper">

需要将位于div死点内的框定位到wrapper div，其中wrapper div的高度取决于边栏div的高度。div中的框相对于包装器div被绝对定位，并设置了一个可变的宽度和高度，该宽度和高度与其中的图像和内容相对应

这可以通过为div内的框指定宽度和高度来实现，但必须与可变宽度和高度有关。（div内的框必须与带填充的img的尺寸相同）

JSFIDLE代码

这是HTML代码：

    <body>
        <div class="wrapper">
            <div class="sidebar"></div>
            <div class="inside-box">
                <img src="badge.gif" />
            </div>
        </div>
    </body>

目前

预期产量

您需要添加一些额外的包装器元素，如下所示：

<div class="wrapper">
    <div class="sidebar"></div>
    <div class="inside-box">
        <div class="inside-wrap">
            <div class="inside-cell">
                <div class="content-wrapper">
                    <img src="http://s21.postimg.org/lgwltcynr/image.jpg" />
                    <p>Tyger Tyger burning bright...</p>
                </div>
            </div>
        </div>
    </div>
</div>

这个解决方案依赖于使用CSS表格单元格，除了旧的IE浏览器外，CSS表格单元格有很好的支持

.inside框

包装器用于识别依赖于某些子元素（如侧边栏）的父块的尺寸

.inside wrap

使用

display:table

捕获100%的高度和宽度

.inside单元格

使用

显示：表格单元格

，并允许垂直和水平对齐

最后，您需要一个

.content包装器

，以根据需要添加一些填充来绘制黄色背景

.content wrapper

是一个自包含的单元，因此您可以在其中放置浮动元素，而不会破坏任何内容

请参见演示：

只需根据预期的输出尝试使用此JSFIDLE，代码几乎没有更改看看它-

检查这把小提琴，这是对这个问题的回答（我认为大致相同）@bUKaneer这不是我要找的，他们以固定的高度和宽度处理。答案很好，但我希望div以其他图像和内容为中心#小编辑问题。让我快速看一下，我将添加一个标题到图像，为演示提供一些上下文。还有另一个浮动到左侧的图像。

<div class="wrapper">
    <div class="sidebar"></div>
    <div class="inside-box">
        <div class="inside-wrap">
            <div class="inside-cell">
                <div class="content-wrapper">
                    <img src="http://s21.postimg.org/lgwltcynr/image.jpg" />
                    <p>Tyger Tyger burning bright...</p>
                </div>
            </div>
        </div>
    </div>
</div>

.inside-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.inside-wrap {
    display: table;
    width: 100%;
    height: 100%;
}
.inside-cell {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}
.content-wrapper {
    background-color: yellow;
    padding: 10px;
    display: inline-block;
}