0

2 つのフローティング div の高さを揃えるのに問題があります。私が達成しようとしているのは、コンテンツの長さが変化するため、2 つの div に同じ高さを並べて表示することです。現在、私のブラウザは Jquery コードを無視しているようです。

ここに私が持っているものがあります:

<style>
#column_first {
    width: 300px
    float: left;
    margin: 15px;
    padding: 25px;
    background-color:#fff;
}
#column_second {
    width:300px;
    float: left;
    margin: 15px;
    padding: 25px;
    background-color:#fff;
    height: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var maxHeight = 0;

$("#column_first").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("#column_second").height(maxHeight);
</script>
</head>
<body>
<div id="column_first"><p>Some Text</p></div>
<div id="column_second"><p>Some Text</p></div>
4

2 に答える 2

3

div の高さを均等にしたい場合は、これを使用します。

var maxHeight = 0;
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);

jsFiddle の例

ID を介して特定の div をターゲットにしているため、変更はすべての div には適用されません。個人的には、代わりに共通のクラスとターゲットを与えます。

また、ドキュメントの準備が整った呼び出しで jQuery をラップするようにしてください。

$(document).ready(function() {
  // Your code here
});
于 2013-05-01T20:29:02.250 に答える
0

純粋な CSS で同じ高さの列を取得できます。

http://cssdeck.com/labs/dxtwufys

body { /* styles for the container element */
    display: table;
    border-spacing: 15px;
}

#column_first, #column_second {
    display: table-cell;
}

#column_first {
    width: 300px;
    /*margin: 15px; ignored*/
    padding: 25px;
    background-color:#fff;
}
#column_second {
    width:300px;
    /*margin: 15px; ignored*/
    padding: 25px;
    background-color:#fff;
}
于 2013-05-01T20:50:05.867 に答える