我无法在保持相等高度的同时扩展两列。我包含了我的 CSS 文件和 HTML 中的片段。我浏览了类似问题的一页又一页,但似乎没有任何效果!我知道我可能忘记了一些简单的事情。下面是我的 HTML 以及一些 CSS 的设置方式。这些标签上方是标题和导航,但我认为代码不相关,所以我没有发布。
<div id="Main">
<div id="RightColumn-Template">
<p>Hey</p>
</div>
<div id="LeftColumn-Template">
<br><br><br>
</div>
</div>
#container {
width: 1000px;
margin-left:auto;
margin-right:auto;
overflow-y: auto;
}
header {
height: 136px;
width:1000px;
line-height:0px;
padding:0px;
margin:0px;
}
nav {
height: 30px;
width: 1000px;
background-color:#219971;
line-height:0px;
padding:0px;
margin:0px;
}
#Main {
width:1000px;
height:100%;
overflow:auto;
clear:both;
}
#RightColumn-Template {
background-image:url(../KeddcoImages/PipeBG.jpg);
background-repeat:no-repeat;
background-color:#A4A7AC;
padding:25px;
width: 200px;
height:100%;
float: left;
}
#LeftColumn-Template {
background-color:#FFF;
background-repeat:repeat-y;
padding:25px;
width:700px;
height:100%;
float:right;
}
最佳答案
创建等高列的方法有几种。
第一个是使用 display:flex
的 Flex 方法
。
div#Main{display:flex;flex-direction: row;}
div#Main >div{border:1px solid gray;width: 50%;
padding: 10px;}
<div id="Main">
<div id="RightColumn-Template">
<p>Hey</p>
<p>Hey</p><p>Hey</p><p>Hey</p>
</div>
<div id="LeftColumn-Template">
<p>Hey</p>
</div>
</div>
第二种方法是对父元素使用 display:table
,对子元素使用 display:table-cell
。
div#Main{display:table;}
div#Main >div{border:1px solid gray;width: 50%;
padding: 10px;display:table-cell;}
<div id="Main">
<div id="RightColumn-Template">
<p>Hey</p>
<p>Hey</p><p>Hey</p><p>Hey</p>
</div>
<div id="LeftColumn-Template">
<p>Hey</p>
</div>
</div>
关于html - Dreamweaver HTML - 列高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30199161/