html - CSS:带图片和中间高度的三列布局

Question

我想在高度上对齐两个侧边栏和一个居中图像。 此外，侧边栏(包含文本)应垂直对齐外容器的高度。

我做了一个描述问题的 fiddle : http://jsfiddle.net/SW3DT/

当全屏显示此示例时，您会看到一切正确，但当您查看 fiddle html 预览(或任何较小的 View )时，它不再起作用。

所以存在以下问题:

1. 在旁边和中心容器水平对齐(position:absolute、左、右)
2. 将子对象从旁边(在本例中为 p)垂直对齐(打破绝对)
3. 所有这些都是动态执行的，以便它可以在不同的屏幕尺寸上使用

如何将这三个点放在一起，很难用 css 对其进行编码。

有没有人有解决办法？

此外: 我如何为此类任务定义可重用的 css 类？

最好的问候， 总线

Answer 1

如果我没有正确理解你的问题，你有点想要一个三列的居中包装，左列和右列占据 200 像素的宽度。如果是这种情况:

查看此 Fiddle Example

HTML:

<div class="content">
    <aside class="column right">
        <p>
             text...
        </p>
    </aside>
    <aside class="column left">
        <p>
             text...
        </p>
    </aside>
    <div class="column center">
        <img class="home_image" src="path_to_image.png" />
    </div>
</div>

CSS:

/* the main wrapper */
.content {
  position: absolute; top: 50%; left: 50%;
  width: 800px; height: 500px;
  margin-left: -401px; margin-top: -251px;
  border: 1px solid #D9D9D9;
}

/* columns */
.column {
    position: absolute; top: 0; bottom: 0;
    width: 180px;
    padding: 10px;
}

.column.left{
    left: 0; background-color: #F2F2F2;
}
.column.right {
    right: 0; background-color: #F2F2F2;
}
.column.center {
    left: 200px; right: 200px;
    text-align: center;
    width: auto;
}

.column.center img {
    border: 1px solid #111; border-radius: 22px;
    width: 128px; height: 128px;
    margin: 0 auto;
}

此外:我如何为此类任务定义可重用的 css 类？

可以看到应用于.left、.right和.center的.column类> 元素，因此在所有三个元素上重复使用。