主页 / 问题

问题[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
Martin Hope
Aноним
Asked: 2023-10-22 17:49:31 +0800 CST
  • 4

在此输入图像描述[！[

.section__product-items {
column-count: 2;
width: 900px;

}
<div class="section__product-items">
    <div class="section__product-item">
        <img src="" alt="">
    <h4 class="product__name">Vicaragua Coffee Beans</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Espresso Ristretto</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Ethiopia Coffee</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Vicaragua Coffee Beans</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
<img src="" alt="">
<h4 class="product__name">Espresso Ristretto</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
<img src="" alt="">
<h4 class="product__name">Ethiopia Coffee</h4>
<span class="product__cost"></span>    
</div>

</div>

] 2 ] 2

css3
Martin Hope
Aноним
Asked: 2023-10-17 12:16:16 +0800 CST
  • 5

.preview__items{
display: flex;

}

.preview__item + .preview__item{
margin-left: 30px;

}

.color__block{
    width: 350px;
    height: 256px;
background-color: #D48A5C;       
top: -14px;

}
<div class="preview__items">
     <div class="preview__item">
        <img class="photo__list" src="img/Group 128.jpg" alt="">
      
        <span  class="number">01</span>
        <h4 class="list__name">Best Coffee Flavor</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br>
        consequat,sit ametey.</p>
    </div>

    <div class="preview__item">
        <img class="photo__list" src="img/Group 129.jpg" alt="">
        <span class="number">02</span>
        <h4 class="list__name">Proper Roasting</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br>
        consequat,sit ametey.</p>
    </div>

    <div class="preview__item">
        <img class="photo__list" src="img/Group 130.jpg" alt="">
        <span class="number">03</span>
        <h4 class="list__name">Place to Get Lost</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br>
        consequat,sit ametey.</p>
    </div> 
</div>

][1]] 2

css3
Martin Hope
The__Tip учусь
Asked: 2023-09-28 14:46:06 +0800 CST
  • 6

<form action="" method="get">
  <p>
    <label for="name">Имя:</label>
    <input type="text" name="name" id="name" required>
  </p>

  <p>
    <label for="phone">Телефон:</label>
    <input type="text" name="phone" id="phone" required>
  </p>

  <p>
    <label for="text">Оставьте сообщение, и мы свяжемся с Вами в ближайшее время:</label>
    <input type="text" name="text" id="text" required>
  </p>



  <button type="submit">Отправить</button>
</form>

在此输入图像描述

css3