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

我想在高度上对齐两个侧边栏和一个居中图像。此外，侧边栏（包含文本）应该从外部容器的高度垂直对齐。CSS：带图像和中间高度的三列布局

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

当具有在全屏这个例子中，你看到的一切正确的，但如果你看看小提琴HTML预览（或任何较小视图）这是行不通的了。

因此，有以下几个问题：

对齐一边和中心容器水平（位置：绝对的，左，右）
对齐从旁白子对象（在这种情况下，P公司）垂直（打破了绝对）
做了这一切动态，以便它可以在不同的屏幕上使用尺寸为

怎么可以看到所有的三点在一起，很难把这个代码的Wi th css。

有没有人有解决方案？

此外：我怎么能定义这些任务的可重用的CSS类？

最好的问候，的BSU

来源

2012-05-14 bodokaiser

如果我没有理解你的问题正确，你还挺想有三列居中的包装，具有左，右列占用宽度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类。

来源

2012-05-14 18:05:38 Zuul

嗨，这真的很好。你也已经将可重用的东西包含在你的例子中！我只需要垂直对齐侧栏中的文本，但使用你的构造应该很容易。 – bodokaiser

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

回答

相关问题