0

私は div とクラスをいじって、ウェブサイトのテキストをうまく並べようとしました。現在、2 つのクラスがあり、これらを並べて 2 つの列を作成したいと考えています。コードを追加しますが、基本的に、右側の列、テキスト列はモバイル デバイスではうまく整列しません。この列には、行の中央を垂直方向に中央揃えにする可能性のある複数行のテキストが必要です。現在、パディングを使用していますが、理想的ではありません。

また、コンテンツ Div の下にテキストを配置する必要があります。そうしないと、フッターが忍び寄ります。これも面倒です...さまざまな div とクラスの設定を試してみましたが、まだ適切な設定が見つかりません。

html と css はこちら: http://hascomp.net/

問題の領域は次のとおりです。

HTML

<div id="content"> 

  <p class="contentleftcol" >
  <img src="frontend/laptop-computer_repairs.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  Windows OS computer repairs and tune ups: remove not needed software slowing the computer down
  </p>

  <p class="contentleftcol" >
  <img src="frontend/wifi.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  wifi configuration and optimisation
  </p>

  <p class="contentleftcol" >
  <img src="frontend/anti_spyware.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  virus and spyware removal
  </p>

  <p class="contentleftcol" >
  <img src="frontend/computer_upgrades.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  computer upgrades
  </p>
  </div>

CSS

#content{
    padding:0 0 24px 24px;
}
.contentleftcol{
    float:left;
    width:150px;
    padding-left:50px;
    height:150px;



}
.contentrightcol{
    float:right;
    width:760px;
    padding-top:68px;
    padding-bottom:70px;
}

ありがとう！

4

2 に答える 2

0

まず、画像とテキスト (contentleftcol と contentrightcol) を 1 つの div、div.row (たとえば) にラップすることをお勧めします。次に、高さの問題を防ぐために clearfix を追加します。これは、小さな画面のさらなる開発にも役立ちます。

    .row:after{
      content: "";
      display: table;
      clear: both; 
    }

その後、Hive7 が言ったことをすべて実装するか、それについてもっと読むことができます。

于 2013-10-25T09:10:14.680 に答える