Question

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

我做了一个描述问题的小提琴： http://jsfiddle.net/SW3DT/

在全屏上显示这个示例时，您会看到一切正确，但是当您查看小提琴html预览（或任何较小的视图）时，它将不再起作用。

因此存在以下问题：

将水平放置在一边和中心容器（位置：绝对，左，右）
将子对象与旁边（在本例中为p）垂直对齐（打破绝对值）
动态执行此操作，以便可以在不同的屏幕尺寸上使用

如何一起看到所有这三点，很难用css编写代码。

有没有人有解决方案？

此外：我怎样才能为这些任务定义可重用的css类？

最诚挚的问候，的BSU

Answer 1

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

请参阅此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类？

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

CSS：具有图像和中间高度的三列布局

1 个答案: