前端之家

  1. 首页
  2. 问答

同时调整几个元素的大小

• 问答

我正在尝试使用工具栏创建一个“文本区域”，以基于背景中存储在文本区域中的html内容显示富文本内容。 html就是这样：

    <div class="primary-content">
        <div class="textarea-with-nav" id="outerWrap">
            <div class="navbar">
                <ul>
                    <li><a href="#">teste1</a></li>
                    <li><a href="#">teste2</a></li>
                    <li><a href="#">teste3</a></li>
                </ul>
            </div>
            <textarea id="layer1"></textarea>
        <textarea id="layer2"></textarea>
        </div>
    </div>

现在具有CSS样式的

html,body {
    margin: 0;
    height: 100%;
}
.primary-content {
    padding-top: 55px;
}
.navbar {
    grid-area: header;
    overflow: hidden;
    background-color: #333;
    width: 100%;
        z-index: 1;
}
.navbar.site-nav {
    position: fixed;
    top: 0;
}
.navbar ul { list-style-type: none; }
.navbar ul li { display: inline; }
.navbar ul li a {
    color: white;
    padding: 8px 16px;
    text-decoration: none;
}
.navbar ul li a:hover {
    background-color: #555;
    color: white;
    height: 100%;
}
.textarea-with-nav {
        transform: translate(50%);
    width: 400px;
    height: 300px;
    position: realtive;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.textarea-with-nav > .navbar {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.textarea-with-nav > textarea {
    border: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 396px !important;
    height: 246px !important;
    resize: none;
}
.textarea-with-nav > textarea:focus { outline: none; }

#outerWrap {
position: relative;
z-index: 0;
}

#layer1 {
position: absolute;
z-index: 1;
}

#layer2 {
position: absolute;
z-index: 2;
}

调整layer2（前面的那个）的大小时，应同时调整两个文本区域的大小（而layer1可能不是最终版本中的文本区域）。

此外，如果我水平调整textareas的大小，导航栏也应伸展，以跟踪textarea的新尺寸。

有人知道如何实现这一目标吗？这是否需要一些javascript代码，还是只需要CSS即可？

guomaochh 回答：同时调整几个元素的大小

据我了解，您的最终目标是：

  • 创建一个富文本框编辑器。
    • 具有两个textarea元素
    • 带有一个tool-bar。
      • 我们将不再假定它实际上是nav-bar。

您的帖子中的要求不是100％清楚，但据我了解：

  

一个textarea调整大小时，另一个调整大小，而toolbar调整大小。

我唯一的假设是基于您对另一个答案的评论：

  

有了这个，当我想要一个在另一个之上时，并排显示文本区域。

我将假设仅调整textarea的宽度不会影响其他高度。

下面是一个最小的纯CSS示例，它将带您朝正确的方向前进。它有很多问题（在进行大小调整时似乎总是使用textarea），但是由于这个问题几乎是逐字的，我对your previous question的回答是，我将让您解决其中的一些问题。我强烈建议您看看CSS calc function。

/* Rich Text Editor */
.rich-text-editor {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-width: 300px;
	background-color: #ccca;
	padding: 15px;
}
.rich-text-editor > .toolbar {
	list-style-type: none;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #f33;
	background: -webkit-linear-gradient(to right,#f33,#f77);
	background: linear-gradient(to right,#f77);
	padding: 5px 6px;
}
.rich-text-editor > .toolbar > li {
	display: inline-block;
	color: #fff;
	margin: 0 5px;
	padding: 5px;
	width: 15px;
	border: 1px solid #fff5;
	text-align: center;
	cursor: pointer;
	user-select: none;
	border-radius: 5px;
	transition: 0.3s linear all;
}
.rich-text-editor > .toolbar > li:hover {
	background-color: #fff5;
}
.rich-text-editor > textarea {
	width: 100%;
	border: 1px solid #ccc;
	border-top: none;
	padding: 5px;
}

/* Your Navbar */
.navbar {
	grid-area: header;
	overflow: hidden;
	background-color: #333;
	width: 100%;
        z-index: 1;
}
.navbar.site-nav {
	position: fixed;
	top: 0;
}
.navbar ul { list-style-type: none; }
.navbar ul li { display: inline; }
.navbar ul li a {
	color: white;
	padding: 8px 16px;
	text-decoration: none;
}
.navbar ul li a:hover {
	background-color: #555;
	color: white;
	height: 100%;
}

/* Just for Demonstration */
html,body {
	margin: 0;
	height: 100%;
}
.primary-content {
	height: calc(100% - 50px);
	display: flex;
	align-items: center;
	justify-content: center;
}
<div class="navbar site-nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Edit</a></li>
	</ul>
</div>
<div class="primary-content">
	<div id="rte-test" class="rich-text-editor">
		<ul class="toolbar">
			<li>H</li>
			<li>=</li>
			<li>/</li>
			<li>_</li>
		</ul>
		<textarea></textarea>
		<textarea></textarea>
	</div>
</div>

还可以选择使用JavaScript来分别操纵textarea，但这有点过头了，并且与纯CSS版本存在相同的问题：

var richTextEditor = document.getElementById("rte-test");
var oldWidth = 0;
function resize(index,altIndex) {
	var textAreas = richTextEditor.getElementsByTagName("TEXTAREA");
	var width = textAreas[index].clientWidth;
	if (oldWidth !== width) {
		textAreas[altIndex].style.width = width + "px";
		oldWidth = width;
	}
}
.rich-text-editor {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
<div id="rte-test" class="rich-text-editor">
		<textarea onmouseup="resize(0,1);"></textarea>
		<textarea onmouseup="resize(1,0);"></textarea>
</div>

祝您在未来的工作中一切顺利。

,

您所有的文本区域都有position: absolute，所以我认为它没有用。

尝试使用flex：

.primary-content {
  position: relative;
  z-index: 0;
  height: 480px;
  width: 640px;
}

.navbar {
  grid-area: header;
  overflow: hidden;
  background-color: #333;
  width: 100%;
  z-index: 1;
}

.navbar.site-nav {
  position: fixed;
  top: 0;
}

.navbar ul {
  list-style-type: none;
}

.navbar ul li {
  display: inline;
}

.navbar ul li a {
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

.navbar ul li a:hover {
  background-color: #555;
  color: white;
  height: 100%;
}

.textarea-with-nav {
  transform: translate(50%);
  width: 400px;
  height: 300px;
  position: relative;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.textarea-with-nav>.navbar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.textarea-with-nav>textarea {
  border: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 100%;
  height: 100%;
  resize: both;
}

#layer1 {
  z-index: 1;
  height: 100%;
}

#layer2 {
  z-index: 2;
  height: 100%;
}
.flex{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.insideTextArea{
  width: "50%"
}
<div class="textarea-with-nav" id="outerWrap">
  <div class="navbar">
    <ul>
      <li><a href="#">teste1</a></li>
      <li><a href="#">teste2</a></li>
      <li><a href="#">teste3</a></li>
    </ul>
  </div>
  <div class="flex">
     <textarea id="layer1" class="insideTextArea"></textarea>
     <textarea id="layer2" class="insideTextArea"></textarea>
  </div>
</div>

我没有测试，但是像这样的事情可以做。

csshtmljavascriptresize
本文链接：https://www.f2er.com/3050890.html

大家都在问