Question

我在下面的代码中提到了一个彼此相同的三个部分：

   <!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>

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

enter image description here

此处每个部分的高度必须自动调整为三个SECTIONS的MAX高度。三个部分的宽度比为30％，40％和30％能否请您建议，如何实现。

Answer 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小提琴的链接，你可以在CSS代码中看到列的默认高度只有10px。当文档准备就绪时，我使用一个简单的函数从div获取具有ID属性的高度。然后我用jquery更改CSS，只需将列类的高度设置为我们刚刚查找的高度。

如何将三个部分相互对齐;其中每个部分的高度等于MAX高度为3

1 个答案: