Question

我要定位图像，使其放置在div的中心：#two，而笔记本电脑的屏幕在div的第二部分，而笔记本电脑的下身在div的位置：#three。以下是我希望它看起来如何的图像，但我无法这样做。这也应该是敏感的。如果我重新调整窗口的宽度和div：#one的高度发生变化，则图像应随之移动。

任何帮助将不胜感激。谢谢！

body{
    margin: 0;
}
#one{
    background-color: #293462;
    height: 20vw;
    display: grid;
    align-items: end;
}
#two{
    background-color: #216583;
    min-height: 40px;
    width: 100vw;
}
#three{
    background-color: #f76262;
    min-height: 100px;
}
h1{
    margin: 0;
}
ul{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
li{
    list-style: none;
    text-align: center;
}
li:nth-child(3){
    grid-column: 4/5;
}
img{
    height: 150px;
    position: absolute;
    left: 50%;
}

<div id="one">
    <div id="two">
        <ul>
            <li><h1>text</h1></li>
            <li><h1>text</h1></li>
            <li><h1>text</h1></li>
            <li><h1>text</h1></li>
        </ul>
    </div>
    <img src="https://imgur.com/n8I8D6E.png" alt="laptop">
</div>
<div id="three"></div>

Answer 1

我认为您可能会因为使用CSS网格而使操作复杂化。我只用flexbox和absolute positioning。

在这里您的代码已修改。

body{
    margin: 0;
}
#one{
    background-color: #293462;
    height: 20vw;
}
#two{
    background-color: #216583;
}
#three{
    background-color: #f76262;
    min-height: 100px;
}
ul{
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
    text-align: center;
    position:relative;
    padding: 0 10px;
}
li:nth-child(3){
   min-width: 30%;
    
}
img{
    height: 150px;
    position: absolute;
    bottom:-15px;
    left:50%;
    transform: translateX(-50%);
}

<div id="one"></div>
<div id="two">
        <ul>
            <li><h1>text</h1></li>
            <li><h1>text</h1></li>
            <li><img src="https://imgur.com/n8I8D6E.png" alt="laptop"></li>
            <li><h1>text</h1></li>
            <li><h1>text</h1></li>
        </ul>
    </div>
<div id="three"></div>

将图像沿div的底部放置

1 个答案: