簡體   English   中英

CSS:具有圖像和中間高度的三列布局

[英]CSS: three-column layout with image and middle height

我想對齊兩個側邊欄和一個居中圖像的高度。 此外,側欄(包含文本)應在距外部容器的高度上垂直對齊。

我做了一個描述問題的小提琴: http : //jsfiddle.net/SW3DT/

以全屏顯示此示例時,您會看到一切正確,但是當您查看小提琴html預覽(或任何較小的視圖)時,它將不再起作用。

因此存在以下問題:

  1. 將側面和中央容器水平對齊(位置:絕對,左側,右側)
  2. 垂直對齊子對象(在本例中為p)(破壞絕對值)
  3. 動態完成所有操作,以便可以在不同的屏幕尺寸上使用

您如何才能同時看到所有這三點,因此很難使用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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM