1

この例についていくつか質問したいだけです。

ここに画像の説明を入力

最近、この 3 列のレイアウトを行う最善の方法は何ですか? もちろん、テーブルはありましたが、現在は div などがあります。これを達成するための最新の最善の方法は何ですか? それが完全に私次第だった場合、他の3つのものを含むコンテナdivがあります。に設定しwidth: 33%;display: inline;

また、これらの垂直仕切りをどのように取得しますか? 繰り返しますが、私が知る限り、テーブルでそれを使用し、垂直方向のルール効果を得る特定の境界線のみを表示します。

しかし、この効果を得るための最近の最良の方法は何ですか? ツールボックスに html5 と css3 を入れる..

前もって感謝します!

4

6 に答える 6

4

jsFiddle デモ: http://jsfiddle.net/yDXLp/3/

<style>
    footer {
        background-color: #eee;
        margin: 10px auto;

    }
    footer h2 {
        font-size: 1.5em;
        font-weight: bold;
    }
    footer > div,
    footer > .divider {
        display: inline-block;
        vertical-align: middle;   
    }
    footer > div {
        padding: 1%;
        text-align: center;
        width:30%;
    }

    footer > .divider {
        font-style: normal;
        height: 240px;
        border: 1px solid #888;
        -webkit-box-shadow: 1px 2px 1px #ccc;
        box-shadow: 1px 2px 1px #ccc;
    }
</style>

<footer>
    <div>
        <h2>Our Client</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        <button>Read more</button>
    </div>
    <i class="divider"></i>

    <div>
        <h2>Pay Rates</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum  </p>
        <button>Read more</button>
    </div>
    <i class="divider"></i>
    <div>
        <h2>About US</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        <button>Read more</button>
    </div>
</footer>
于 2013-02-07T11:16:16.267 に答える
4

これを試して

HTML

<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>

CSS

.outer {
    background: #734e91;
    padding: 12px;
}
.wrap {
    margin: 0 auto;
}
.sub {
    padding: 12px;
    width: 32%;
    height: 150px;
    background: #734e91;
    display: table-cell;
    border-right: solid #a175c4 1px;  
}
.sub:last-child {
    border: 0px;
}

デモ更新

于 2013-02-07T11:02:24.390 に答える
2

box-sizing: border-box;(標準のcssボックスモデルの代替方法)を使用することをお勧めします。

何をしbox-sizing: border-box;ますか?divの幅(33%など)を定義し、境界線とパディングを追加すると、divの計算に影響を与える時間が長くなります。親の33%のままです(33%-(境界線+パディング))。

標準のボックスモデルは、33%(この場合は33%+ボーダー+パディング)で計算されたものにそれらを追加します。

HTMLマークアップ:

<div class="footer">
    <div class="footer-item item1"></div>
    <div class="footer-item item2"></div>
    <div class="footer-item item3"></div>
</div>

CSS:

.footer {
    box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}

.footer-item {
    width: 33%;
    float: left;
}

.footer-item + .footer-item {
    border-left: 1px solid black;
}
于 2013-02-07T11:09:58.143 に答える
1

最善の方法は、達成したいことによって異なります。ウィンドウのサイズ変更などに対して、列はどのように動作する必要がありますか。

写真のようなことをしている場合は、おそらく固定幅を使用して、テキストの線幅を制御できるようにします。

インラインブロックを使用することで、折りたたまれて小さな画面(電話など)で互いに下に配置される列を実現できます

最初に、目的の動作を理解してください。

編集:おっと、私は読み間違え、水平と垂直を混同しました;-)他の答えは彼を十分に説明していると思います。

私が間違っている場合は訂正してください。ただし、css3列プロパティは同じテキスト本文の複数の列用であると思います。

于 2013-02-07T10:54:09.473 に答える
1

Twitter Bootstrap( http://twitter.github.com/bootstrap/ )、Gumby Framework( http://gumbyframework.com/ )をチェックしてください

これらのフレームワークは、水平バーの既成の機能を提供する場合があります。それ以外の場合は、境界線を使用します。右を除くすべての境界線を透明色に設定する

于 2013-02-07T10:49:04.563 に答える
1

列を行うcss3の方法は、「c​​olumn- *」ファミリーのプロパティを使用しています

それらは現在、すべての主要なブラウザーでサポートされており、問題はありません。

個人的に私はホーム サイトでこれらのスタイルを使用しており、非常に柔軟な (おそらくいくつかの小さな欠点はありますが) レイアウトの書式設定を提供します。

于 2013-02-07T10:52:39.780 に答える