一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

今天给各位爷整点不一样的

本文尝试了一种新的前端开发模式,并证明了只要prompt得当,或者说有丰富的prompt使用经验,通过gpt4可以提高开发效率的事实。

You:

今天给各位爷整点不一样的

如图所示,上述图片展示的是一个简易的css布局样式,

  • 我们记蓝色背景的矩形为A,黄色矩形为B,黄色矩形之上的灰色矩形为C,绿色矩形为D,橘红色为E。
  • 其中,A的尺寸是固定的,为354px X 600px;B相对于A在水平和竖直方向上居中对齐。
  • 并且B的宽度是A的70%,高度是A的50%~80%;
  • C与B的宽度相同,高度固定为200px;
  • D的高度最低为35px最大为70px,随其中文字高度发生变化;
  • E占据B竖直方向上的剩余空间,举例下边底线为20px,左右为10px;
  • E中输入文字导致E的高度发生变化,从而使B的高度发生变化,但是B高度最大为A的80%,因此在到达这一限度时,E中需要出现滚动条,防止E高度继续增大从而导致B的尺寸发生变化。

请根据我的描述和上面的图片生成符合要求的html文件源码.

ChatGPT

基于您的描述和图片,以下是一个简化版本的HTML和CSS代码,可以实现所描述的布局:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Layout</title>
<style>
  .container-a {
    width: 354px;
    height: 600px;
    background-color: blue;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .box-b {
    width: 70%;
    height: 50%; /* Initial height, can grow up to 80% of .container-a */
    background-color: yellow;
    position: relative;
    overflow: hidden;
  }

  .box-c {
    width: 100%;
    height: 200px;
    background-color: grey;
  }

  .box-d {
    background-color: green;
    min-height: 35px;
    max-height: 70px;
    overflow: auto;
  }

  .box-e {
    background-color: orange;
    margin: 20px 10px 10px 10px;
    overflow: auto;
  }
</style>
</head>
<body>

<div class="container-a" id="containerA">
  <div class="box-b" id="boxB">
    <div class="box-c"></div>
    <div class="box-d">D content</div>
    <div class="box-e">E content</div>
  </div>
</div>

<script>
  // JavaScript code to manage the dynamic heights and overflow
  const containerA = document.getElementById('containerA');
  const boxB = document.getElementById('boxB');
  const boxE = document.querySelector('.box-e');

  function adjustHeight() {
    let maxHeightB = containerA.clientHeight * 0.8;
    let currentHeightB = boxB.clientHeight;
    let heightE = boxE.scrollHeight;
    
    if (currentHeightB + heightE > maxHeightB) {
      boxE.style.overflowY = 'scroll';
      boxE.style.maxHeight = maxHeightB - currentHeightB + 'px';
    } else {
      boxE.style.overflowY = 'hidden';
    }
  }

  // Call adjustHeight whenever the content of E changes
  boxE.addEventListener('input', adjustHeight);

  // Initial adjustment
  adjustHeight();
</script>

</body>
</html>

在这个代码中,.container-a 是蓝色背景的容器 A,.box-b 是黄色矩形 B,.box-c 是灰色矩形 C,.box-d 是绿色矩形 D,.box-e 是橘红色矩形 E。B 的高度设置为 A 的初始50%,通过 JavaScript 动态调整以确保不超过80%。E 的高度随内容自动增长,但超过 B 的80%时会出现滚动条。这段代码还包括了处理滚动条的 JavaScript 逻辑。

请根据您的实际需求调整这段代码。如果需要将文本输入放入 E 中,并实时调整大小,请在 E 的内部添加 <textarea> 或其他适合的 HTML 元素,并适当调整 JavaScript 代码以响应内容变化。

You:

是这样的,我要求必须使用css完成,不要用到js

ChatGPT

如果您需要一个纯 CSS 解决方案来构建布局,下面是一个示例代码,它使用了 CSS 来实现容器的居中,滚动条的显示,以及高度的限制。由于 CSS 本身不提供容器高度的动态计算功能,所以 B 的高度会基于内容的增加而增加,但不会超过 A 的 80% 高度。对于 E 的内容,当内容溢出时会显示滚动条。

请注意,如果 E 的内容非常多,它将会触发滚动,但 B 的高度将不会因 E 的内容超出而增长超过 A 的 80%。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Only Layout</title>
<style>
  .container-a {
    width: 354px;
    height: 600px;
    background-color: blue;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box-b {
    width: 70%; /* 70% of A */
    max-height: 80%; /* 80% of A */
    background-color: yellow;
    display: flex;
    flex-direction: column;
  }

  .box-c {
    width: 100%; /* Same as B */
    height: 200px; /* Fixed height */
    background-color: grey;
  }

  .box-d {
    background-color: green;
    min-height: 35px; /* Minimum height of D */
    max-height: 70px; /* Maximum height of D */
  }

  .box-e {
    background-color: orange;
    margin: 20px 10px 10px 10px; /* Margins as per specification */
    flex-grow: 1; /* Takes up all remaining space */
    overflow: auto; /* Scrollbar if content overflows */
  }
</style>
</head>
<body>

<div class="container-a">
  <div class="box-b">
    <div class="box-c"></div>
    <div class="box-d">D content</div>
    <div class="box-e">
      E content <br> <!-- Repeat as needed to simulate content overflow -->
      E content <br>
      E content <br>
      <!-- ... -->
    </div>
  </div>
</div>

</body>
</html>

在这个示例中,我们使用了 flex 布局来管理容器内部的元素。.box-e 设置了 flex-grow: 1; 来确保它填充 .box-b 剩余的空间,并且当内容超出时,会出现滚动条。

请根据您的需求调整这个例子中的文字内容和其他属性。这个示例没有动态调整 B 的高度,而是使用了 max-height 来限制其最大高度,因为纯 CSS 不能根据内容动态调整高度。

看效果

结论: 完全满足要求

原文链接:https://juejin.cn/post/7322351017525674018 作者:慕仲卿

(0)
上一篇 2024年1月11日 下午4:49
下一篇 2024年1月11日 下午4:59

相关推荐

发表评论

登录后才能评论