在相同高度对齐来自不同父div的div
我正在尝试将两个div对齐，其中div不是行div的一部分。
float:leftvar 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;
}
每个div（<!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>和copyTarget1）是水平对齐的2个不同列的一部分。
现在我正在尝试对齐两个块引用框，如图所示。将来，我可能会更改代码并添加更多输入框。所以，我不想为两个块报价框添加修复高度。
这个想法是使用javascript但没有改变。该网站的链接位于：LINK
3 个答案:
答案 0 :(得分：1)
在第10行你缺少：
</script>
使用您的控制台检查错误
答案 1 :(得分：1)
要对齐blockquote部分的顶部，您需要使两个列中的内容在上方。
因此我们将该内容包装在div中（可能使用.top类）并使用JS / JQ来确定哪个.top元素是最高的并将该高度应用于所有.top } divs。
$(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演示
如果你想让所有的块引用都达到相同的高度，你也可以这样做。
答案 2 :(得分：0)
尝试此操作以更改#copyTarget2元素
var divh = document.getElementById('copyTarget1').offsetHeight;
document.getElementById('copyTarget2').style.height = divh + 'px';
另外你应该给这个div的背景而不是<pre>标签给黑洞背景
此外，<script type="text/javascript" charset="utf-8">在第10行没有结束</script>标记
以下是屏幕截图，您可以看到两个div #copyTarget2和#copyTarget1具有相同的高度255px
CopyTarget1 http://prntscr.com/c6tvxf
CopyTarget2 http://prntscr.com/c6tw8n
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？