0

我在下面的代码中提到了三个部分，如下所示：

   <!DOCTYPE html>
<html><head><style>
.table {color:black; display: table; width:98%; margin: 5px; padding: 0; min-width:500px; }
.row {display:table-row; padding: 0; margin: 0; vertical-align:middle; }
.cell {padding: 0; margin: 0; vertical-align:middle;}
.one {float:left; border-right:1px solid #e5e5e5; padding-top:5px; text-align:center; display:table-cell; width:6%; min-height: 50px;}
.oneq {float:left; padding-bottom:5px; border:1px solid #e5e5e5; display:table-cell; width:94%; min-height: 90px;}
.two {float:left; padding-top:5px; display:table-cell; width:88%; min-height: 50px;}
.tre {float:left; padding-top:5px; text-align:center; display:table-cell; width:5%; min-height: 50px;}
label { display: block; color: #000066;}

.loginform li {
display: inline; 
list-style: none;
}
}
</style></head>
<body style="margin: 0px;">
<br><section class="loginform" id="middle" style="min-width: 500px; margin: 1px auto;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;"><form method="post"><div class="table"><div class="row"><div class="cell oneq"><span class="cell">Sample Text Sample Text Sample Text Sample Text </span></div> <div class="cell tre"><span class="cell"> </span></div></div><div class="row"><div class="cell one"><span><input type="radio" name="optia" value="a" id="optia" /> A </span></div><div class="cell two"><span class="cell">Sample Text</span></div> <div class="cell tre"><span class="cell"></span></div></div><div class="row"><div class="cell one"><span><input type="radio" name="optia" value="b" id="optia" /> B </span></div><div class="cell two"><span class="cell">Sample Text </span></div> <div class="cell tre"><span class="cell"></span></div></div><div class="row"><div class="cell one"><span><input type="radio" name="optia" value="c" id="optia" /> C </span></div><div class="cell two"><span class="cell">Sample Text</span></div> <div class="cell tre"><span class="cell"></span></div></div><div class="row"><div class="cell one"><span><input type="radio" name="optia" value="d" id="optia" /> D </span></div><div class="cell two"><span class="cell">Sample Text</span></div> <div class="cell tre"><span class="cell"></span></div></div><div class="row"><div class="cell one"></div><div class="cell two"><input type="submit" name="DEMO" id="DEMO" value="DEMO"></input></div><div class="cell tre"><span class="cell"></span></div></div></form></fieldset></section>
<section class="loginform" id="left" style="overflow-y: auto;" >
<fieldset style="border-radius:3px; padding:3px; height:200px; overflow-y:scroll; overflow:auto;" >
<ul style="padding:5px; margin-top:5px;">
One HERE<hr><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li>
<hr> DEMO Topic = 13<br> HERE SHOWN = 0</ul></fieldset>
</section>
<section class="loginform" id="right" style="min-width: 500px; margin: 1px auto;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;"> HERE IS TEXT</fieldset></section>
</body></html>

在这里，我想重新安排布局，如下图所示：

在此处输入图像描述

这里每个部分的高度必须自动调整到三个部分的最大高度。三个部分的宽度比例分别为 30%、40% 和 30%，您能否建议一下，如何实现。

4

1 回答 1

1

我几乎看不懂你的代码，它太混乱了。无论如何，我会将所有“多个” div 放在父容器中。然后使用 jquery 计算该容器的高度。然后将该高度传递给您的其他列。

这是我的意思的小提琴：jsfiddle

$(document).ready(function()
                  {
                      var height = $('#referenceColumn').height(); //looks up the height of the div you need and puts it in a variable.

                      $('.column').css('height', height); //sets the column height of all div with the class "column"
                  });

您需要在标题中引用 JQuery。你可以下载它并建立一个本地链接，或者只是把它放在你的 html<head>标签之间。

<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>

如果您打开指向 JS fiddle 的链接，您可以在 CSS 代码中看到列的默认高度仅为 10 像素。当文档准备好时，我使用一个简单的函数从具有 ID 属性的 div 中获取高度。然后我用jquery更改CSS，只需将列类的高度设置为我们刚刚查找的高度。

于 2014-02-02T10:01:29.060 回答