0

主に CSS と HTML から構築している単純な Web ページに左の列を追加しようとしています。これは基本的に、中央に画像があり、下にテキストがあり、右側にそれを説明する小さな列があります。画像がポラロイド画像のように見えるようにしようとしていますが、それができたと思いますが、テキストを含む左の列をサイトに追加するのに問題があります...

誰か手を貸してくれませんか？

現時点では、左の列を左側の余白程度のサイズにしたいのですが...

これまでのサイト全体は次のとおりです: https://www.dropbox.com/s/kpr1wy18uvv1ez5/picturesoftoday.zip

div 'leftcol' を作成してから float:left; にしてみました。幅: 200px; 背景色: ccc; しかし、実際には何も機能していないようでした。

初歩的な質問ですみません..

ありがとう、ルーカス

4

3 に答える 3

1

ルーカス、

これを試して -

これをスタイルに使用します。

.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>

1 つの div を左にフロートする場合は、その隣に 1 つの div が必要な場合は、両方を左にフロートするようにしてください。

于 2012-10-30T07:04:13.130 に答える
0

.leftcolページの左側に幅 200px の列を追加しました。ラフですが、これがあなたが試みていたことだと思います。bodyクラスのようにフォーマットされたセレクターを持っていたので、ピリオドを削除しました。私はまた、あなたの.polaroiddivに一緒に左にフロートするように言いました.leftcol

http://dl.parkrr.com/picturesoftheday.zip

お役に立てれば！

于 2012-10-30T07:03:30.970 に答える
0

css プロパティを div に割り当てて、マージンのサイズにすることができます。動的にonload 関数内でdiv='leftcol' の幅を設定できます。

それを修正するには、style position:fixed; あなたの問題を解決します。固定位置要素は、ビューポートまたはブラウザー ウィンドウ自体に対して配置されます。

于 2012-10-30T06:56:20.653 に答える