Question

我尝试过使用JQuery，但有点迷失...所以我现在正试着用CSS做这件事

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

我基本上想要这样做，但有两列，所以有两个div在页面中有相同的高度，我很新css很抱歉，如果这是一个重复/明显的问题。

感谢任何帮助谢谢！

Answer 1

如果您尝试修改链接中的代码，您只需要修改css：

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

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

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

我会将您的背景颜色声明为十六进制值并在容器中声明，除非您想为列提供两种不同的颜色背景。

Answer 2

尝试min-width而不是width。

同时添加属性float:left是一种不好的做法。

定义一个类：

.lfloat {
    float:left;
}

并继续将其添加到div。

Answer 3

可以通过一些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/

P.S。 IE7在使用此代码时有局限性。

Answer 4

如果您使用现代浏览器，则不需要JS。使用现代功能!!!检查我的例子

＆＃13;

.wrapper{
  display: flex;
  flex-direction: row;
}

.col{
  flex: 1; /*make it the same witdh*/

  /*just make it look better*/
  background: #333;
  color: #fff;
  margin: 0 5px;
  padding: 5px;
  box-shadow: 0 0 3px rgba(0,0,0,.5);
  /*just make it look better*/
}

＆＃13;

<div class="wrapper">
  <div class="col">
    Nunc at facilisis dui. Nam rhoncus blandit bibendum. Ut ligula mi, ornare id pellentesque vel, interdum ut mauris. Proin bibendum nunc non nunc efficitur, sed varius est aliquam. Aliquam semper at sapien a suscipit. Suspendisse potenti. Sed volutpat nulla eu enim ornare, eget vehicula nisi auctor.
  </div>
  <div class="col">
    test
  </div>
  <div class="col">
    test
  </div>
</div>

＆＃13;

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - 您可以在此处详细了解

等高div（两列）

4 个答案: