主页 / 问题

问题[css3]

Martin Hope
KLYSTRON
Asked: 2024-12-19 03:27:19 +0800 CST
  • 5

晚安！我必须寻求建议，因为...我自己不太可能弄清楚。实际上有如下结构：

div {
    border: 1px solid black;
}

.window {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    width: 628px;
    height: 632px;
    padding: 4px;
}

.items>div {
    width: 200px;
    height: 200px;
    margin: 4px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title></title>
</head>

<body>
    
    <div class="window">
        <div class="items">
            <div class="item_1">1</div>
            <div class="item_2">2</div>
            <div class="item_3">3</div>
            <div class="item_4">4</div>
            <div class="item_5">5</div>
            <div class="item_6">6</div>
            <div class="item_7">7</div>
            <div class="item_8">8</div>
            <div class="item_9">9</div>
        </div>
    </div>

</body>

</html>

窗口容器，由于项目容器位于窗口的中心，项目本身的固定大小为 628px x 632px。 items中有9个div，高度和宽度也固定为200px。任务如下所示：我们需要确保当浏览器窗口的大小减小时，项目及其子 div 也会减小，同时保持具有所有缩进的 3x3 结构。然后，当浏览器窗口放大时，相反，它们达到了最大尺寸并且不再进一步增大。那些。像这样的东西：

屏幕

我已经处理这个问题第三天了，没有太大进展。我们设法使其宽度全部缩放，但并不完全符合需要。这样的事情，我将感谢您的帮助和暗示，以挖掘哪个方向。

css3
Martin Hope
Лена
Asked: 2024-12-08 04:45:22 +0800 CST
  • 5

在此输入图像描述

请告诉我。有以下结构，1 个父块和 3 个子块。

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

可以放置第一个子块（红色），使其占据 2 行。第二个（橙色）位于红色右侧的顶部，占据了所有可用空间。也就是，他将绿色的方块压到了底部。

只有柔性，没有网格。红色块的宽度和高度是已知的；当然，红色块拉伸以匹配右侧两个块的高度是不希望的。好吧，如果没有其他办法，你能做什么呢...

.listtr {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-between;
    gap: 10px;
    height: 100px;
    padding: 10px;
  }
  
.listtr > * {
    &.img {
        width: 11%;
        min-width: 80px;
        max-width: 120px;
    }
    &.title {
        width: calc(100% - 10px);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    &.st {
        color: #6a6a6a;
        font-size: 13px;
    }
}
css3
Martin Hope
Aldmi
Asked: 2024-08-16 13:58:47 +0800 CST
  • 5

.grid_container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
}
  .item {
    text-align: center;
    background-color: #4a7a60;
    padding: 3px;
    font-size: 35px;
    width: 300px;
    //height: 600px ;
    overflow-y: auto; // если данных много должна появится полоса прокрутки, и не расти высота контейнера
  }
  .zone_1 {
    background-color: #455a64;
  }
  .zone_2 {
    background-color: #455a00;
  }
<div class="grid_container">
  <div class="zone_1">
    <div class="item">
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
      <p>Данные_1</p>
    </div>
  </div>

  <div class="zone_2">
    ZONE_2
  </div>
</div>

您好，网格容器中有 2 行，行的高度占据了所有可用空间的比例，grid-template-rows: 2fr 1fr 如果元素的高度在这些行内变大，那么区域也会开始扩展，但我需要滚动才能。出现并且比率 2fr 1fr 不变。如果手动限制元素的高度，溢出时会出现滚动，但元素将无法占据整个分配的行高。

css3
Martin Hope
Djony Cooper
Asked: 2024-02-20 18:54:08 +0800 CST
  • 6

我有一个小部件，当您将鼠标悬停时，它会从折叠状态展开，而当您将鼠标移开时，它会返回到其原始状态。如果光标位于某个元素上，则它不应返回到其原始状态。如何正确使用对焦？

.top_line_widget {
  display: flex;
  padding: 3px 460px;
}

.search {
  display: flex;
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 5px;
}

.search_btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  color: #ffffff;
  cursor: pointer;
}

.search_text {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  color: #ffffff;
  font-size: 12px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
  font-width: bold;
}

.search:hover>.search_text {
  width: 910px;
  padding: 0 6px;
}

.search:hover>.search_btn:hover {
  background: linear-gradient(45deg, #ffa500, #ff2400);
}
<div class="top_line_widget">
  <div class="search">
    <input type="text" class="search_text" placeholder="Введите имя или фамилию" />
    <img class="search_btn" src=".\static\images\phone_book.png">
  </div>
</div>

我尝试通过将其添加到 CSS 来解决该问题 - 但没有成功：

.search:focus > .search_text{
  width:910px;
  padding: 0 6px;
}
css3