主页 / user-473534

Teoom07's questions

Martin Hope
Teoom07
Asked: 2024-11-02 23:49:57 +0800 CST
  • 5

大家好。一行中最多可以有三列，然后在添加新列表项时，它会移动到新行，在这种情况下，该元素将必须占据该行的整个可用宽度，并且如果有两个新元素，然后它们将宽度分开。有点像为元素设置flex: 1 0 315px。

* {
  box-sizing: border-box;
}

.content {
  display: grid;
  width: 1024px;
  grid-template-columns: 315px 1fr;
  gap: 20px;
}

.content__list {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
}
<div class="content">
  <h2 class="content__title">TITLE</h2>
  <ul class="content__list">
    <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
     <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
     <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
    <li class="content__list-item">
      <h3 class="content__list-title">
        Lorem
      </h3>
      <p class="content__list-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum blanditiis minus. Quae facere consequuntur dolorum laborum ipsum nam natus, laboriosam, ab ipsam corrupti eaque sed aperiam quibusdam blanditiis neque nobis omnis saepe ducimus voluptas eius eum! Sunt assumenda explicabo fugit molestiae ut, odit quia blanditiis mollitia earum velit.
      </p>
    </li>
  </ul>
</div>

html
Martin Hope
Teoom07
Asked: 2024-10-14 21:32:16 +0800 CST
  • 5

我对一个公式感兴趣，如果父块的宽度小于我们设置的子块的宽度，则该公式可以计算哪个块应占用父块内的多少空间。

为什么MAIN块的宽度为423px，而ASIDE块的宽度为375px。如果父类减去100px，那么MAIN的宽度已经是393px，ASIDE的宽度是305px。您如何计算块的宽度？

   

 /* Ширина parent 800px */
    * {
      box-sizing: border-box;
    }

    body {
      width: 1000px;
      border: 1px solid red;
      height: 600px;
      padding: 50px;
    }

    .parent {
      width: 800px;
      margin: 0 auto;
      border: 1px solid green;
      height: 100%;
      display: flex;
      align-items: start;
    }

    .aside-block {
      width: min(50%, 450px);
      border: 1px solid blue;
    }

    .main-block {
      width: max(50%, 450px);
      border: 1px solid black;
    }
    <div class="parent">
      <div class="aside-block">ASIDE</div> 
      <div class="main-block">MAIN</div> 
     <div>

   

 /* Ширина parent 700px */
    * {
      box-sizing: border-box;
    }

    body {
      width: 1000px;
      border: 1px solid red;
      height: 600px;
      padding: 50px;
    }

    .parent {
      width: 700px;
      margin: 0 auto;
      border: 1px solid green;
      height: 100%;
      display: flex;
      align-items: start;
    }

    .aside-block {
      width: min(50%, 450px);
      border: 1px solid blue;
    }

    .main-block {
      width: max(50%, 450px);
      border: 1px solid black;
    }
    <div class="parent">
      <div class="aside-block">ASIDE</div> 
      <div class="main-block">MAIN</div> 
     <div>

html
Martin Hope
Teoom07
Asked: 2023-02-21 19:31:21 +0800 CST
  • 5

大家好。

有必要用.list列表的两列制作两个 div，以便它们共享彼此之间的空间，但是会出现一个问题，当.list第二个列表中的第一个 div 中没有足够的文本时，文本会飞得很远，但是它有必要像第二个 diva 中的列那样缩进.list。

在那里，由于文本的缘故，有更多，因此列表变得更接近第一个列表。

这可以以某种方式完成吗？

我想在不设置绝对值的情况下保持适应性。

ul li {list-style: none;}

.list {
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
<div class="list">
<ul>
  <li>Lorem ipsum dolor .<li>
  <li>Lorem ipsum dolor<li>
  <li>Lorem ipsum dolor.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem.<li>
</ul>
</div>


<div class="list">
<ul>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem ipsum dolor sit amet amet amet<li>
</ul>
</div>

html
Martin Hope
Teoom07
Asked: 2022-09-08 05:11:59 +0800 CST
  • 1

开始学习AJAX。问题是：为什么通过异步函数解码 ours 时response，我们得到一个对象 { id: 101 } - 它甚至从哪里读取？在处理过程中，.then我们会从链接中获得完整的对象数组吗？我期待异步函数也从引用返回一个对象数组，但它返回一个我不知道它来自哪里的对象。

fetch它应该在两种情况下都一样吗？await它只是等待函数完成fetch，仅此而已，它不添加任何内容。并且它本身返回一个 promise，在这两种情况下都fetch存储了对象的相同结果 。Response

处理方式.then：

const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
 
const result = fetch(POSTS_URL, {
    method: 'GET',
})

result
    .then(response => response.json())
    .then(result => console.log(result));

通过异步函数：

const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const createNewPost = async () => {
    try {
        isLoading = true;
        const response = await fetch(POSTS_URL, {
            method: 'POST',
        })
        if (!response.ok) {
            throw new Error('Ошибка запроса');
        }

        const result = await response.json();
        console.log('result', result);
    } catch (error) {
        console.log(error);
    } finally {
        isLoading = false;
    }
   
};
createNewPost();

javascript
Martin Hope
Teoom07
Asked: 2022-08-06 05:07:48 +0800 CST
  • 0

大家好！

我需要这样做，以便当您将鼠标悬停在图像上时，会在其上叠加一个透明的黑色胶片，上面会有一个标题和一个您可以单击的按钮。问题如下：我叠加了电影，有标题，但是光标：指针没有设置到按钮上，不知道怎么解决。

这是我的代码：https ://liveweave.com/WcO7K3

当您将鼠标悬停在图像上时，光标应出现在出现的白色方块上。

这是 figma 的样子： https ://www.figma.com/file/gBEwh0z9OcWrV6TGs8H2Ij/%D0%BF%D0%BE%D1%82%D1%80%D1%84%D0%BE%D0%BB %D0 %B8%D0%BE-%D1%85%D1%83%D0%B4%D0%BE%D0%B6%D0%BD%D0%B8%D0%BA%D0%B0?node-id= 27% 3A53

“我的投资组合”部分，有一个应该如何的例子。

html css
Martin Hope
Teoom07
Asked: 2022-07-31 21:56:29 +0800 CST
  • 0

情况如下：

<div class="block">
   <div class="parent">
      <div class="child"></div>
   </div>
</div>

有一个“块”元素，其宽度为浏览器窗口的 100%，还有一个“父”元素，其宽度固定，例如 1390px。在“父”内部应该存储一个“子”元素，其宽度为 15%，并且也像“块”一样从浏览器窗口缩放，而不是从“父”缩放。那么，如何实现这个问题呢？

html css
Martin Hope
Teoom07
Asked: 2022-08-31 15:14:18 +0800 CST
  • 0

大家好，我一直在练习布局，偶然发现了一个新问题，在标题附近的屏幕边缘出现一条线：

在此处输入图像描述

而且现在不知道怎么正确实现，通过border-bottom，或者下载，插入，或者需要线从屏幕大小缩放。

这是布局的链接：https ://www.figma.com/file/gBEwh0z9OcWrV6TGs8H2Ij/%D0%BF%D0%BE%D1%82%D1%80%D1%84%D0%BE%D0%BB %D0% B8%D0%BE-%D1%85%D1%83%D0%B4%D0%BE%D0%B6%D0%BD%D0%B8%D0%BA%D0%B0?node-id= 27%3A53

html