为什么该职位在该部分无法正常工作

Question

I have a section part on the website where I want four products being displayed in the middle, right and left arrows on both sides of the screen and a title in the middle above the displayed products, I think I have all of the HTML and CSS good but the position isn't working properly, can someone have a look and help me feature it out?我在网站上有一个部分，我希望在屏幕两侧的中间、左右箭头和中间显示的产品上方显示四个产品，我想我拥有所有的 HTML 和 CSS不错，但位置不正常，有人可以看看并帮助我突出显示吗？ img of the sections I am talking about我正在谈论的部分的 img

ps: the background color doesn't feel the space that the items and buttons are in, why does it happens too? ps：背景色感觉不到item和button所在的空间，为什么也会这样？

edit: this is a pic of how i wish it would look编辑：这是一张我希望它看起来如何的照片

HTML : HTML :

<section class="one">
        <div><span class="title">New products</span></div>
        <br>
        <button class="left">
            <span class="Lmain"></span>
            <span class="Lside"></span>
        </button>
        <div class="items">
            <div class="item">
                <a href="">
                    <img class="itemImg" src="../Images/Image1.png" alt="Picture of the product">
                </a>
                <div><span class="desc">Description about that specific item that is being showen to you above this text
                        right here</span></div>
            </div>
            <div class="item">
                <a href="">
                    <img class="itemImg" src="../Images/Image2.png" alt="Picture of the product">
                </a>
                <div><span class="desc">Description about that specific item that is being showen to you above this text
                        right here</span></div>
            </div>
            <div class="item">
                <a href="">
                    <img class="itemImg" src="../Images/Image3.png" alt="Picture of the product">
                </a>
                <div><span class="desc">Description about that specific item that is being showen to you above this text
                        right here</span></div>
            </div>
            <div class="item">
                <a href="">
                    <img class="itemImg" src="../Images/Image4.png" alt="Picture of the product">
                </a>
                <div><span class="desc">Description about that specific item that is being showen to you above this text
                        right here</span></div>
            </div>
        </div>
        <button class="right">
            <span class="Rmain"></span>
            <span class="Rside"></span>
        </button>
    </section>

CSS : CSS :

.title {
        text-align: center;
        position: absolute;
        margin: auto;
        border: 1px solid goldenrod;
        font-size: 40px;
    }

    .one {
        background-color: hotpink;
        position: relative;
    }

    .two {
        background-color: rgb(255, 0, 128);
    }

    /*items appearance*/
    .items {
        position: relative;
        margin: auto;
    }

    .item {
        border: 1px solid rgb(255, 170, 0);
        float: left;
        position: absolute;
        top: 0px;
        margin: 0px 8px;
        left: 12%;
        width: 350px;
        height: auto;
    }

    .itemImg {
        width: 100%;
        height: auto;
    }

    /*end of item appearance*/


    .right {
        right: 0px;
        top: 0px;
        position: absolute;
    }

    .left {
        left: 0px;
        top: 0px;
        position: absolute;
    }

Answer 1

Utilize flexbox to make this layout easy:利用 flexbox 使这种布局变得简单：

 body { margin: 0; background: #1a1a1a; color: #fff; font-family: sans-serif; } h1#title { padding: 1rem; text-align: center; } main { padding: 1rem; display: flex; justify-content: space-between; align-items: center; } #products { display: flex; justify-content: center; align-items: flex-start; margin: 0; } .product { padding: 2rem 1rem; background: #fff; color: black; margin: .5rem; }

 <body> <h1 id="title">Items</h1> <main> <div class="arrow" id="arrow-left">&#8592;</div> <div id="products"> <div class="product"> Product </div> <div class="product"> Product </div> <div class="product"> Product </div> <div class="product"> Product </div> </div> <div class="arrow" id="arrow-right">&#8594;</div> </main> </body>

Answer 2

Here a list of problem I see:这是我看到的问题列表：

the .title element is position:absolute , so it doesn't fill any space and other elements will position weirdly. .title元素是position:absolute ，所以它不会填充任何空间，其他元素的位置会很奇怪。 Solution: remove position: absolute解决方案：删除position: absolute
the .title is a <span> element witch is an inline-element who doesn't behave like a block element ( <div> , <p> , <h1> , etc.), so the text-align: center doesn't take effect. .title是一个<span>元素女巫是一个行内元素，它的行为不像块元素（ <div> 、 <p> 、 <h1>等），所以text-align: center没有生效。 Solution: remove the span and give the .title class to the parent <div>解决办法：去掉span，把.title类给父<div>
the left and right buttons should be wrapped in a <div> with position:relative左右按钮应包裹在<div> ， position:relative

Here is a jsfiddle with the fixed code.这是一个带有固定代码的jsfiddle 。

I didn't fix the image positioning because i think those will be positioned by js, anyhow it dipends by the images dimensions and is a very weak method.我没有修复图像定位，因为我认为它们将由 js 定位，无论如何它会根据图像尺寸进行调整，并且是一种非常弱的方法。 So I strongly suggest using flexbox that is widely supported by browsers .所以我强烈建议使用浏览器广泛支持的flexbox 。

You can follow the @yerme example or this guide on flexbox .您可以在flexbox 上遵循@yerme 示例或本指南。

为什么该职位在该部分无法正常工作

问题描述

2 个解决方案

解决方案1
1 2020-01-16 17:55:18

解决方案2
0 2020-01-16 20:31:50

为什么该职位在该部分无法正常工作

问题描述

2 个解决方案

解决方案1 1 2020-01-16 17:55:18

解决方案2 0 2020-01-16 20:31:50

解决方案1
1 2020-01-16 17:55:18

解决方案2
0 2020-01-16 20:31:50