11

私は現在かなり古いウェブサイトを更新しており (最後の更新は 2001 年頃でした)、HTML5 と CSS3 を使用することに同意しました。

一般的なデザインでは、多くのパディングとマージンを備えた、非常にクリーンな白とグレーの色調のスタイルに取り組んでいます. 私の問題はホームページにあります。3 列の中央揃えのレイアウトが必要です。しかし、どこから始めますか？浮かせてみましたがだめでした。

私はこれを正しくやっていますか？

HTML:

<div class="colwrapper">
    <div class="ltcol"></div>
    <div class="ctcol"></div>
    <div class="rtcol"></div>
</div>

CSS:

.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }
4

6 に答える 6

9

CSS は次のようになります。

.ltcol, .ctcol { float:left; }
.rtcol { float:right; }

CSS float プロパティの目的は、一般的に言えば、ブロック レベルの要素を左また​​は右にプッシュし、他のブロック要素との関係でフローから除外することです。これにより、フロートされた要素を自然に流れるコンテンツで囲むことができます。この概念は、写真やその他のグラフィック要素が片側に配置され、他のコンテンツ (通常はテキスト) が左または右に配置された要素の周りを自然に流れる印刷物で日常的に目にするものと似ています。

詳細については、この興味深い記事を読む必要があります。

このデモを参照してください: http://jsfiddle.net/akhurshid/YRWLV/

于 2012-07-12T11:52:05.233 に答える
3

これにも Flexbox プロパティを使用できるので、float や clearfix について心配する必要はありません。

  main{
  /* .colwrapper{ */
    display: flex;
    flex-flow: row;
    justify-content: center;
  }
  main > section{
  /* .ltcol,.ctcol,.rtcol{ */
    display:flex;
    flex-flow:column;
    align-items:center;
    padding:10px; padding:.625rem;
  }

  main > section:nth-child(2){
  /* .ctcol{ */
    margin:0 20px; margin:0 1.25rem;
  }

http://caniuse.com/flexboxは、おそらくあなたが望むほどサポートが進んでいないことを示していますが、古いバージョンの構文と新しいhttp://cssを混在させることでサポートを改善する方法があります-tricks.com/using-flexbox/には、次のプロジェクトでこれを試してみたい場合、Chris Coyier からの素晴らしい記事があります (この投稿はかなり古いものです)。詳細については、http://html5please.com/#flexboxをご覧ください。

また、HTML5 を使用している場合は、よりセマンティックな構造にするために div よりもセクションを使用する可能性が高いため、比較は次のようになります。

<main>
  <section></section><!-- or <nav></nav> -->
  <section></section><!-- or <article></article> -->
  <section></section><!-- or <aside></aside> -->
</main>

instead of...

<div class="colwrapper">
  <div class="ltcol"></div>
  <div class="ctcol"></div>
  <div class="rtcol"></div>
</div>
于 2013-11-16T19:16:49.873 に答える
3

独自の実装を展開するのではなく、これらの実証済みの実装のいずれかを使用してください。テスト済みで動作するコードを取得できるという事実に加えて、ほとんど労力をかけずにサイトに応答性を追加できます。

あなたがグーグルならもっとたくさん..

于 2012-07-12T11:59:05.103 に答える
3

したがって、この質問にタグを追加するcss3ので、css3 列レイアウトでこれを作成することをお勧めします。

より詳しい情報

例えば

HTML

<div class="colwrapper">
    <div>text</div>
</div>

CSS

.colwrapper div
{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;
}

IE では動作しません。

于 2012-07-12T11:58:28.043 に答える
3

HTML は非常にクリーンです。これは大きな前進です。

float: leftすべての列に a を追加する必要があります。フロートが列の後にキャンセルされるようにするには、フロート列のclear後に div を追加することをお勧めします。

HTML:

<div class="colwrapper">
    <div class="ltcol">Column 1</div>
    <div class="ctcol">Column 2</div>
    <div class="rtcol">Column 3</div>
    <div class="clear"></div>
</div>​​​​​​​​​​​​​​​​​

CSS:

.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }

</p>

于 2012-07-12T11:56:20.020 に答える
0

rtcol div を beofre le ltcol div に入れてみてください。

  <div class="colwrapper">
    <div class="rtcol">X</div>
    <div class="ltcol">X</div>
    <div class="ctcol">X</div>
  </div>​

http://jsfiddle.net/EDjpy/

于 2012-07-12T11:54:16.310 に答える