[英]CSS: three-column layout with image and middle height
我想對齊兩個側邊欄和一個居中圖像的高度。 此外,側欄(包含文本)應在距外部容器的高度上垂直對齊。
我做了一個描述問題的小提琴: http : //jsfiddle.net/SW3DT/
以全屏顯示此示例時,您會看到一切正確,但是當您查看小提琴html預覽(或任何較小的視圖)時,它將不再起作用。
因此存在以下問題:
您如何才能同時看到所有這三點,因此很難使用CSS進行編碼。
有沒有人有辦法解決嗎?
此外:如何為此類任務定義可重用的CSS類?
最好的問候,bsus
如果我確實理解您的問題正確,那么您有點想要一個具有三列的居中包裝器,左右兩列占據200px的寬度。 如果是這種情況:
看到這個小提琴的例子
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
類,從而在這三個元素上都可以重用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.