Question

我在网页上对齐元素时遇到问题。

这是我希望页面显示的样子：

这就是我上面发布的代码和样式现在的样子：

问题是row2和row3之间的空间由于某种原因太大，我希望它与row1和row2之间的空间相同。

提供可复制的示例：

body 
{
    font: 14px/1.35 Trebuchet MS;
    padding: 0;
    margin 0;
    background-color: #ffffff;
}

.container
{
    display: grid;
    grid-template-columns: 0.25fr 0.25fr 30px .6fr 0.4fr 1fr;
    grid-template-rows: min-content 30px 1fr 1fr 15px 0.1fr;
    grid-template-areas: 
        "branding . . showcase showcase showcase"
        ". . . showcase showcase showcase"
        "menu1 menu2 . showcase showcase showcase"
        ". description . showcase showcase showcase"
        ". . . . . ."
        ". . . . buttons ."
        ;
    width: 75%;
    height: 95%;
    overflow: hidden;    
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.menu1
{
    grid-area: menu1;
    width: 100%;
}

.menu1 ul li ul
{
    display: none;
    grid-area: menu2;
    position: absolute;
    left: 0;
    top: 0;  
    width: 120px;
    padding-left: 10px;
}

.menu1 ul li:hover ul
{
    display: block;
}

.menu1 ul li:hover span
{
    font-weight: bold;
}

.showmenu2
{
    display: block;
}

nav a
{
    color: #000000;
    text-decoration: none;
}

nav a:hover
{
    font-weight: bold;
}

nav ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li
{
    border-top: #000000 1px solid;
}

nav li.bottom
{
    border-bottom: #000000 1px solid;
}

nav li.empty
{
    border: none;
}

h1
{
    font-size: 14px;
    font-weight: normal;
    margin: auto;
}

.showcase
{
    grid-area: showcase;
    width: 100%;
    position: relative;
}

.showcase div
{
   position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.showcase div img
{
    width: auto;
    height: 100%;
}

.description
{
    grid-area: description;
    text-align: right;
    align-self: end;
}

.buttons
{
    display: block;
    grid-area: buttons;
    align-self: center;
    justify-self: center;
}

.buttons#sub
{
    margin-top: 20px;
    align-self: bottom;
    justify-self: center;
}

.buttons button
{
    display: block;
    float: left;
    width: 12.5px;
    height: 12.5px;
    margin-right: 5px;
    background-color: #000000;
    opacity: 0.25;
    border: none;
    cursor: pointer;
}

.buttons span
{
    display: block;
    float: left;
    width: 12.5px;
    height: 12.5px;
    cursor: pointer;
    font-size: 30px;
    line-height: 9px;
    font-weight: bold;
}

.buttons span#left, .buttons span#subLeft
{
    margin-right: 15px;
}

.buttons span#right, .buttons span#subRight
{
    margin-left: 10px;
}

.buttons button.last
{
    margin: 0;
}

.buttons button:focus
{
    outline: none;
}

.buttons button:hover
{
    opacity: 1;
}

.buttons button.active
{
    opacity: 1;
}

.buttons.minimized
{
    margin-top: -30px;
    margin-left: 5px;
}

.buttons.minimized button
{
    width: 7.5px;
    height: 7.5px;
}

.buttons.minimized span
{
    display: none;
}

.buttons#imgButtons
{
    display: none;
}

.buttons.show#imgButtons
{
    display: block;
}

.menu1 li.current span
{
    font-weight: bold;
}

.menu1 li:not(.current) span
{
    color: grey;
}

.menu1 li:not(.current):hover span
{
    color: #000000;
}

.menu1 li ul li.current
{
    font-weight: bold;
}

.menu1 li ul li:not(.current) a
{
    color: grey;
}

.menu1 li ul li:not(.current) a:hover
{
   color: #000000;
}

.maschinen#showcase1, .frako#showcase1, .letraset#showcase2
{
    display: block;
}

.letraset#showcase1, .letraset#showcase3, .letraset#subShowcase
{
    display: none;
}

.letraset#showcase2 img
{
    width: auto;
    height: 100%;
}

.letraset#showcase3 img
{
    width: 100%;
    height: auto;
}

.letraset#showcase2 span
{
    display: block;
    float: left;
    height: 30%;
    margin-right: 12.5px;
    margin-bottom: 12.5px;
}

.letraset#showcase2 span.row2
{
    height: 25%;
}

.letraset#showcase2 span.row3
{
    height: 40%;
}

#description1
{
    display: block;
}

#showcase2 span.clear, #showcase3 span.clear
{
    clear: both;
    margin: 0;
}

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="container">
            <div class="showcase">
                <div class="letraset single" id="showcase1">
                </div>
                <div class="letraset" id="showcase2">
                    <span>
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span>
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span>
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span class = "clear"></span>
                    <span class="row2">
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span class="row2">
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span class="row2">
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span class="row2">
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span class = "clear"></span>
                    <span class="row3">
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span class="row3">
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>
                    <span class="row3">
                        <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" alt="??">
                    </span>                    
                </div>
                <div class="letraset" id="showcase3">                 
                </div>                
            </div>
            <div class="description">
                <div id="description1">
                </div>
            </div>
            <div class="buttons" id="mainButtons">
                <span id="left">&lt;</span>
                <button class="active" id="btn1"></button>
                <button id="btn2"></button>
                <button class="last" id="btn3"></button>
                <span id="right">&gt;</span>
            </div>
            <div class="buttons" id="imgButtons">   
                <span id="subLeft">&lt;</span>
                <button id="imgBtn1"></button>
                <button id="imgBtn2"></button>
                <button id="imgBtn3"></button>
                <button class="last" id="imgBtn4"></button>
                <span id="subRight">&gt;</span>
            </div>            
        </div>  
    </body>
</html>

浮动元素之间的奇怪间距

0 个答案: