我试图将两个 div 对齐到相同的高度，而 div 不是行 div 的一部分。
var divh = document.getElementById('copyTarget1').offsetHeight;
document.getElementById('copyTarget2').style.height = divh + 'px';/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body {
background: hsl(184,65%,49%);
margin: 0;
font-family: 'Lato';
text-align: center;
color: #fff;
font: 15px/1.4em;
}
pre {
background-color: #333;
padding: 6px;
font-size: 12px;
color: #2fbe35;
line-height: 1.3em;
}
code {
font-family: "Courier New", Courier, mono;
color: #2fbe35;
}
blockquote {
border: none;
color: #fff;
padding: 5px 20px 5px 20px;
margin-right: 30px;
margin-left: 30px;
}
.content
{
width: 100%;
margin: 0;
}
.column1 {
width: 50%;
height:auto;
float: left;
}
.column2 {
width: 50%;
height:auto;
float:left;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML-CSS EDITOR</title>
<meta name="generator" content="Mephisto">
<link href="./main2.css" rel="stylesheet" type="text/css">
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed">
<script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="column1">
<h1>CSS EDITOR</h1>
<div>Replace Header Text Color: </div><input type="text" id='thebox1'>
<div>Replace Header Background Color: </div><input type="text" id='thebox2'>
<div>Replace Logo Section Background Color: </div><input type="text" id='thebox5'>
<div id="copyTarget1">
<blockquote>
<pre>
<code>
#topsection {
background-color: <b class="popup2" style="color:#fff;">#value </b>;
width:100%;
height:80px;
z-index:1;
position:absolute;
top:10px;
left:0;
color: <b class="popup1" style="color:#fff;">#value </b>;
}
</code>
</pre>
</blockquote>
</div>
<button id="copyButton1">Copy</button><br><br>
</div>
<div class="column2">
<h1></h1>
<h1>HTML EDITOR</h1>
<div>Enter header section text: </div><input type="text" id='thebox3'>
<div>Enter image link: </div><input type="text" id='thebox4'>
<div id="copyTarget2">
<blockquote>
<pre>
<code>
<xmp>
<div id="topsection">
<div id="header1"></xmp><b class="popup3" style="color:#fff;">HEADER TEXT</b><xmp></div>
<div id="header2">1 Jan 2015 - 31 Jan 2015</div>
</div>
</xmp>
</code>
</pre>
</blockquote>
</div>
<button id="copyButton2">Copy</button><br><br>
</div>
</div>每个 div(copyTarget1 和 copyTarget2)都是水平对齐的 2 个不同列的一部分。
现在我正尝试对齐两个 block 引用框，如图所示。将来，我可能会更改代码并添加更多输入框。所以，我不想为两个 block 引用框设置固定高度。
最初的想法是使用 javascript，但没有任何改变。网站链接在这里:LINK
最佳答案
要对齐 block 引用部分的顶部，您需要使两列中的内容上方具有相同的高度。
因此我们将该内容包装在一个 div 中(可能使用 .top 类)并使用 JS/JQ 确定哪个 .top 元素最高并应用所有 .top div 的那个高度。
$(document).ready(function() {
var highestBox = 0;
$('.top').each(function() {
if ($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.top').height(highestBox);
});body {
background: hsl(184, 65%, 49%);
margin: 0;
font-family: 'Lato';
text-align: center;
color: #fff;
font: 15px/1.4em;
}
pre {
background-color: #333;
padding: 6px;
font-size: 12px;
color: #2fbe35;
line-height: 1.3em;
}
code {
font-family: "Courier New", Courier, mono;
color: #2fbe35;
}
blockquote {
border: none;
color: #fff;
padding: 5px 20px 5px 20px;
margin-right: 30px;
margin-left: 30px;
}
.content {
width: 100%;
margin: 0;
}
.column1 {
width: 50%;
height: auto;
float: left;
}
.column2 {
width: 50%;
height: auto;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="column1">
<div class="top">
<h1>CSS EDITOR</h1>
<div>Replace Header Text Color:</div>
<input type="text" id='thebox1'>
<div>Replace Header Background Color:</div>
<input type="text" id='thebox2'>
<div>Replace Logo Section Background Color:</div>
<input type="text" id='thebox5'>
</div>
<div id="copyTarget1">
<blockquote>
<pre>
<code>
#topsection {
background-color: <b class="popup2" style="color:#fff;">#value </b>;
width:100%;
height:80px;
z-index:1;
position:absolute;
top:10px;
left:0;
color: <b class="popup1" style="color:#fff;">#value </b>;
}
</code>
</pre>
</blockquote>
</div>
<button id="copyButton1">Copy</button>
<br>
<br>
</div>
<div class="column2">
<div class="top">
<h1>HTML EDITOR</h1>
<div>Enter header section text:</div>
<input type="text" id='thebox3'>
<div>Enter image link:</div>
<input type="text" id='thebox4'>
</div>
<div id="copyTarget2">
<blockquote>
<pre>
<code>
<xmp>
<div id="topsection">
<div id="header1"></xmp><b class="popup3" style="color:#fff;">HEADER TEXT</b><xmp></div>
<div id="header2">1 Jan 2015 - 31 Jan 2015</div>
</div>
</xmp>
</code>
</pre>
</blockquote>
</div>
<button id="copyButton2">Copy</button>
<br>
<br>
</div>
</div>Codepen 演示
如果您希望所有 block 引用的高度相同，您也可以这样做。
关于javascript - 在相同高度对齐来自不同父 div 的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38994605/