添加左列到網頁HTML/CSS

我想添加一個左列到我主要用CSS和HTML構建的簡單網頁。它基本上只是一個圖像在中心，文字低音和右側的一個小列描述了它。我試圖讓它看起來像圖像是一個寶麗來的形象，我想我已經得到了這一點，但我無法添加一個左欄文字到網站...添加左列到網頁HTML/CSS

任何人都可以借我一隻手嗎？

我想左側立柱約爲左側此刻距的大小...

這裏是整個網站至今：https://www.dropbox.com/s/kpr1wy18uvv1ez5/picturesoftoday.zip

我試圖創建一個div' leftcol'然後使其浮動：left;寬度：200px; background-color：ccc;但似乎沒有任何工作。

很抱歉的新手問題..

感謝，盧卡斯

來源

2012-10-30 Lucas

向我們展示您的html css，如果可能的話創建一個http://jsfiddle.net/。別人會幫助你更容易。 – freebird

您嘗試過的示例代碼也是如此。 – sunleo

盧卡斯，

試試這個 -

使用此樣式：

.leftcol { 
    width:170px; 
    height:auto; 
    float:left; 
} 

.polaroid { 
    width:930px 
    height:auto; 
    float:left; 
} 

.polaroid img { 
    border: 20px solid #fff; 
    border-bottom: 75px solid #fff; 
    -webkit-box-shadow: 5px 5px 5px #778; 
    -moz-box-shadow: 5px 5px 5px #778; 
    box-shadow: 5px 5px 5px #778; 
    }

使用此爲HTML：

<div class="leftcol"> 
    <p>Whatever you want in your left column</p> 
    </div> 
    <div class=polaroid"> 
     <p>October 29th, 2012<p> 
     <img src="images/today.jpg" width="1000" height="670" border="0" /> 
    </div>

如果你要浮動一個DIV在左邊，確定你是否想要旁邊的一個，你將它們都浮在左邊。

來源

2012-10-30 07:04:13

謝謝！這很好，唯一的是文字在圖片的中間，所以我必須添加位置：相對;回到.polarioid，我不得不在底部添加一點（20px），這樣寶麗來效果的陰影就可以看到，但這兩個修正效果很好！ – Lucas