1

これにJQueryを使ってみましたが、ちょっと迷ってしまいました...だから今CSSでやってみようとしています

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

私は基本的にこれをやりたいのですが、2つの列があるので、同じ高さでページの中央に2つのdivがあります。これは、cssにかなり慣れていないので、繰り返し/明白な質問である場合は申し訳ありません。

どんな助けでもありがたいですありがとう！

4

4 に答える 4

0

リンクからコードを変更しようとしている場合は、cssを変更するだけです。

     #container1 {
       float:left;
       width:100%;
     }

     #col1 {
       float:left;
       width:50%;
       background:red;
     }

     #col2 {
       float:left;
       width:50%;
       background:yellow;
     }

もちろん、列に2つの異なる色の背景が必要な場合を除いて、背景色を16進値としてコンテナ自体で宣言します。

于 2012-06-11T22:48:33.840 に答える
0

min-widthだけでなく入れてみてくださいwidth。

また、プロパティを追加することfloat:leftは悪い習慣です。

クラスを定義する：

.lfloat {
    float:left;
}

に追加し続けdivます。

于 2012-06-12T12:54:29.903 に答える
0

いくつかの CSS で簡単に実行できます。

<div style="overflow:hidden;" class="fleft">
    <div class="leftsec content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.    
    </div>
    <div class="rightsec content">
        lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.    
    </div>

CSS :

.fleft {
    float: left;
}

.content {
    margin-bottom: -1000px;
    overflow: hidden;
    padding-bottom: 1000px;
}
.leftsec {
    float: left;
    padding-right: 12px;
    width: 208px;
    background:red;
}

.rightsec {
    border-left: 2px solid #000000;
    clear: right;
    left: 0;
    padding-left: 18px;
    background:green;
}

例のフィドル: http://jsfiddle.net/m3LsQ/1/

PS IE7 には、このコードの使用に制限があります。

于 2013-03-23T06:33:49.227 に答える