【发布时间】：2016-12-23 23:48:13
【问题描述】：
我试图将两个 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 个不同列的一部分。
现在我正在尝试对齐两个块引用框，如图所示。将来，我可能会更改代码并添加更多输入框。所以，我不想为两个块引用框设置一个固定高度。
这个想法是使用 javascript，但没有任何改变。该网站的链接在这里：LINK
【问题讨论】：
-
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
-
但是，你应该知道没有 CSS 方法可以垂直对齐不共享父元素的元素。
-
@Paulie_D 我知道。这就是为什么我尝试使用 JS 但它不起作用的原因。
-
@Paulie_D 我发布了我使用的代码。代码 sn-p 对我不起作用，因为它说代码太长。
-
需要一个minimal演示...我们不需要所有代码，只需要显示问题即可。
标签： javascript html css alignment