gpt4 book ai didi

CSS:调整大小点击被盗,而是选择

转载 作者:太空宇宙 更新时间:2023-11-03 18:32:46 25 4
gpt4 key购买 nike

我有一个...

<body> with <div id="prj_div">
<div id="prj_mainframe">&nbsp;</div>
<div id="prj_inputarea">
<div id="prj_inputarea_left">
</div>
<div id="prj_inputarea_center">
</div>
<div id="prj_inputarea_right">
</div>
</div>

和 CSS...

#prj_div {
overflow: hidden;
resize: both;
min-width: 32.2em;
width: 32.2em;
min-height: 22ex;
padding: 0.375ex 0.1875em;
position: relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
#prj_chatframe {
resize: none;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 3.75ex;
overflow-x: hidden;
overflow-y: scroll;
}
#prj_inputarea {
resize: none;
width: 100%;
position: absolute;
height: 3.75ex;
line-height: 3.75ex;
padding: 0 0.1em !important;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
margin: 0;
padding: 0;
text-align: left;
}
#prj_inputarea_left {
width: 7.25em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 7.25em;
}
#prj_inputarea_center {
min-width: 27.25em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 7.25em;
}
#prj_inputarea_right {
width: 3em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
right: 0px;
}
#prj_id {
width: 7.25em;
}
#prj_text {
width: 75%;
}

prj_inputarea_left和中间有一个文本输入,右边有12个字母的超文本,FWIW。

Fiddle

如果我将#prj_inputarea 宽度设置为 97% 而不是 100%,效果会更好。我正试图解决两个问题。

  1. 使 reziable prj_div 可以从 prj_inputarea 后面访问。
  2. 最初的目标是让 prj_inputarea_center 收缩/增长以填充可用空间。

尝试的解决方案:
z-index,结果是溢出创建了一个 x-scroll 并调整了它的大小。这有点管用,但我想在没有 5 像素的 x 滚动的情况下进行。
Javascript?这工作得很好。如果这意味着将一项新技术带入战场,我宁愿没有这个功能。

仿照:
http://stevesanderson.github.io/fixed-height-layouts-demo/two-columns.html

最佳答案

Fiddle

为了完成这项工作,发生了很多事情,也进行了很多小的改动。最大的游戏规则改变是将 prj_inputarea 远离边缘,显然那里有一个控件,我们真的不想用文本覆盖它。完成后,只需将其他所有内容正确对齐即可,例如让 div 不相互接触。

<div id="prj_div">
<div id="prj_mainframe">&nbsp;</div>
<div id="prj_inputarea">
<div id="prj_inputarea_left">
<input type="text" id="prj_id" title="Id" maxlength="16" value="Nickname">
</div>
<div id="prj_inputarea_center">
<input type="text" id="prj_text" title="Text" maxlength="1024">
</div>
<div id="prj_inputarea_right"><a id="prj_notifylink" href="javascript:void(0)">Notify</a> <a id="prj_adminlink" href="javascript:void(0)">Admin</a>

</div>
</div>
</div>

#prj_div {
overflow: hidden;
resize: both;
min-width: 32.2em;
width: 32.2em;
min-height: 22ex;
padding: 0.375ex 0.1875em;
position: relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
#prj_chatframe {
resize: none;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 3.75ex;
overflow-x: hidden;
overflow-y: scroll;
}
#prj_inputarea {
resize: none;
position: absolute;
height: 3.75ex;
line-height: 3.75ex;
padding: 0 0.1em !important;
bottom: 0;
left: 0;
right: 0.5em;
overflow: hidden;
margin: 0;
padding: 0;
text-align: left;
}
#prj_inputarea_left {
width: 6.25em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 6.25em;
}
#prj_inputarea_center {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
right: 5.75em;
left: 6.25em;
}
#prj_inputarea_right {
width: 5.25em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
right: 0px;
}
#prj_id {
width: 7.25em;
}
#prj_text {
width: 100%;
}

关于CSS:调整大小点击被盗,而是选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19453482/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com