html - 浮动效果 - 我的代码存在问题

Question

悬停时我无法使 div“浮动”。一切都随它而动。我试图为我希望看到浮动的框创建一个单独的 div，但它没有修复它，所以我最终删除了它。我的代码有什么问题？我添加了盒子阴影效果，但盒子没有向上移动一点它看起来有点乏味。

HTML

<!-- Valor Pago -->
    <div class="flex-container">
        <div class="row">
            <p>Valor Pago:</p>
            <!-- Texto -->
            <input type="text" size="35">
            <!-- Botão -->
            <div class="botao">
                <button size="20" onclick="valor1()" id="botao">Definir</button>
            </div>
        </div>
    </div>

    <!-- Custo do Produto -->
    <div class="flex-container" id="custo">
        <div class="row">
            <p>Custo do Produto:</p>
            <input type="text" size="50">
        </div>
    </div>

    <!-- Troco -->
    <div class="flex-container" id="troco">
        <div class="row">
            <p>Troco:</p>
            <input type="text" size="50">
        </div>
    </div>

CSS

/* Corpo */
body {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-family: 'DotGothic16', sans-serif;
}

/* Primeiro container (determinando também algumas características dos outros) */
.flex-container {
    display: flex;
    background-image: linear-gradient(rgb(49, 117, 218), rgb(0, 0, 107));
    border-bottom: 2px solid #f1f1f1;
}

/* Caixas que contém o texto (dentro dos containers): Valor Pago, Custo do Produto e Troco */
.flex-container > div {
    background-color: #f1f1f1;
    border-radius: 10px;
    margin: 24px;
    padding: 15px;
    font-size: 22px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    transition: ease-in 0.5s;
}

/* Hover das caixas dentro dos containers */
.flex-container > div:hover {
    background-color: #cac9c9;
    transition: ease-out 0.2s;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
}

/* Configuração de posição e cor do container "Custo" */
#custo {
    background-image: linear-gradient( rgb(216, 0, 0), #570000);
    justify-content: center;
}

/* Configuração de posição e cor do container "Troco" */
#troco {
    background-image: linear-gradient(rgb(17, 212, 82), rgb(0, 77, 0));
    justify-content: flex-end;
}

/*Configuração do div dos botões*/
.botao {
    margin-top: 30px;
}

/* Configuração dos botões dentro dos divs */
#botao {
    width: 80px;
    height: 30px;
    background-color: lightgray;
    border-radius: 10px;
    border: 1px solid black;
    transition: ease-in 0.2s;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 15px;
}

/* Hover dos botões */
#botao:hover {
    background-color: black;
    color: whitesmoke;
    transition: ease-out 0.2s;
}

标签： htmlcss

Answer 1

更新：调整过渡的顶部和底部边距使页面的其余部分在 Firefox 上保持不变，但在 Chrome 和 Edge 上，事情确实会移动，可能是一个错误，不清楚。

一种解决方案是添加一些 JavaScript 来设置行高（并在发生调整大小事件时随时调整高度），在使用粘性页脚概念进行 flex 之前，页脚被粘在底部的方式。

要在保持行高稳定的同时使框向上移动 4px，请在底部边距中添加相同的量 (4px)。悬停样式的边距为：

margin-top: 20px;
margin-bottom: 28px;

这是我更改的完整代码（行没有移动）：

var produceRows = document.getElementsByClassName("product-row");

function setProductRowHeight() {
    var i;
    var rowHeight;

for (var i = 0; i < produceRows.length; i++) {
    produceRows[i].style.height = "auto";
    rowHeight = produceRows[i].getBoundingClientRect().height;
    produceRows[i].style.height = rowHeight + "px";
}
}

window.addEventListener('resize', setProductRowHeight);

setProductRowHeight();

/* Corpo */
body {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-family: 'DotGothic16', sans-serif;
}

/* Primeiro container (determinando também algumas características dos outros) */
.flex-container {
    display: flex;
    background-image: linear-gradient(rgb(49, 117, 218), rgb(0, 0, 107));
    border-bottom: 2px solid #f1f1f1;
}

/* Caixas que contém o texto (dentro dos containers): Valor Pago, Custo do Produto e Troco */
.flex-container>div {
    background-color: #f1f1f1;
    border-radius: 10px;
    margin: 24px;
    padding: 15px;
    font-size: 22px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    transition: ease-in 0.5s;
}

/* Hover das caixas dentro dos containers */
.flex-container>div:hover {
    background-color: #cac9c9;
    transition: ease-out 0.2s;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    margin-bottom: 28px;
}

/* Configuração de posição e cor do container "Custo" */
#custo {
    background-image: linear-gradient(rgb(216, 0, 0), #570000);
    justify-content: center;
}

/* Configuração de posição e cor do container "Troco" */
#troco {
    background-image: linear-gradient(rgb(17, 212, 82), rgb(0, 77, 0));
    justify-content: flex-end;
}

/*Configuração do div dos botões*/
.botao {
    margin-top: 30px;
}

/* Configuração dos botões dentro dos divs */
#botao {
    width: 80px;
    height: 30px;
    background-color: lightgray;
    border-radius: 10px;
    border: 1px solid black;
    transition: ease-in 0.2s;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 15px;
}

/* Hover dos botões */
#botao:hover {
    background-color: black;
    color: whitesmoke;
    transition: ease-out 0.2s;
}

<!-- Valor Pago -->
<div class="flex-container product-row">
    <div class="row">
        <p>Valor Pago:</p>
        <!-- Texto -->
        <input type="text" size="35">
        <!-- Botão -->
        <div class="botao">
            <button size="20" onclick="valor1()" id="botao">Definir</button>
        </div>
    </div>
</div>

<!-- Custo do Produto -->
<div class="flex-container product-row" id="custo">
    <div class="row">
        <p>Custo do Produto:</p>
        <input type="text" size="50">
    </div>
</div>

<!-- Troco -->
<div class="flex-container product-row" id="troco">
    <div class="row">
        <p>Troco:</p>
        <input type="text" size="50">
    </div>
</div>