Question

我正在尝试让我的两个图像彼此相邻显示。目前，他们一直在互相影响。我已经寻找了一些帮助，但是所有这些都使图像保持不变。我希望你们中的一些人可以理解html和CSS，并帮助我解决这一问题。

图像分别位于它们自己的形式内，并且两个图像都具有某种样式，因此具有悬停效果。

.container {
    position: relative;
    width: 400px;
    height: 400px;
    display: inline-block;
}

.image {
    width: 400px;
    height: 400px;
}

.overlay {
    position: absolute;
    transition: all .3s ease;
    opacity: 0;
    background-color: #eee;
    pointer-events: none;
}

.container:hover .overlay{
    opacity: 1;
}

.text {
    color: white;
    font-family: sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
}

.overlayFade {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #39598cab;
}

.container:hover .overlayFade{
    width: 100%;
}

    <center>
        <form action="FrontController" method="post">
            <h2>Vælg hvilken tag type du ønsker</h2>
            <div class="container">                
                <div class="overlay overlayFade">
                    <div class="text">
                        <h1>Spidst tag</h1>
                        Quick-byg carport med spidst tag
                    </div>
                </div>
                <input type="hidden" name="command" value="PointedRoof">
               <input type="image" src="./IMAGES/spidsTag.jpg" class="image" value="Spidst Tag">
            </div>
        </form></center>
        
        
    <center>
        <form action="FrontController" method="post">
            <div class="container">
                <div class="overlay overlayFade">
                    <div class="text">
                        <h1>Fladt tag</h1>
                        Quick-byg carport med fladt tag
                    </div>
                </div>
                <input type="hidden" name="command" value="FlatRoof">
                <input type="image" src="./IMAGES/fladtTag.png" class="image" value="Fladt tag">
            </div>
        </form>
    </center>

Answer 1

由于块属性，图像在彼此下方显示。因为Center标签默认具有block属性。只需在样式表中的CSS下方添加

center {display：inline-block;}

Answer 2

最好的方法是使用display：flex;和align-items：center到父对象。如果要在两端对齐两个子对象，只需使用证明内容即可：space-between 如果您想了解更多关于flex的信息，请访问此链接 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

图像不会彼此相邻显示

2 个答案: