1

我尝试为此使用 JQuery，但有点迷路了......所以我现在尝试用 CSS 来做

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

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

任何帮助表示赞赏谢谢！

4

4 回答 4

0

尝试 putmin-width而不是 just width。

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

定义一个类：

.lfloat {
    float:left;
}

并继续将其添加到div.

于 2012-06-12T12:54:29.903 回答
0

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

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

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

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

而且我会将您的背景颜色声明为十六进制值并在容器本身中，除非您当然希望列有两种不同的颜色背景。

于 2012-06-11T22:48:33.840 回答
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 回答
0

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

.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*/
}
<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>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - 你可以在这里阅读更多

于 2016-04-28T11:39:18.100 回答