Question

我的div有2个孩子：一张图片和两行文字。我将border:1px solid #grey;悬停在div上，但由于某些原因，它也将子级也移动到了div中。

.candidates{
    width:100%;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    padding: 40px 0 45px 0;
    margin: 0 0 12px 0;
}
.candidate{
    width:310px;
    margin: 0 auto 10px;
    height: auto;
    padding: 16px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.candidate:hover{
    background: #FFFDFC;
    border: 1px solid #EAEAEA;
    border-radius: 6px;
}

.candidate-details{
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.candidate-image{
    width:48px;
    height: 48px;
    float:left;
    margin: 0 10px 0 0;
}

.candidate-image img{
    width:100%;
}

<div class="candidates">
   <div class="candidate">
      <div class="candidate-image">
         <img src="images/logo.png" alt="" title="" />
      </div><!-- candidate-image -->

      <div class="candidate-details">
         <h3>Johnny Appleseed</h3>
         <h4>Space Monkey at NASA</h4>
      </div><!-- candidate-details -->
   </div><!-- candidate -->
</div><!-- candidates -->

我添加了box-sizing: border-box;，但是它可以做任何事情。

Answer 1

尽管您应用了box-sizing: border-box;并添加了CSS宽度，但是由于不能固定任何高度，它只能解决水平移动。因此，要克服这种情况，您应该应用1px大小的透明边框，如下所示：

.candidate{
width:310px;
margin: 0 auto 10px;
height: auto;
padding: 16px 15px;
border: 1px solid transparent; /* Key Line */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer 2

.candidates {
    overflow: hidden;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    padding: 40px 0 45px 0;
    margin: 0 0 12px 0;
}
.candidate {
    width: 310px;
    margin: 0 auto 10px;
    height: auto;
    padding: 16px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid white;
}
.candidate:hover {
    background: red;
    border-radius: 6px;
}
.candidate-details {
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
;
}
.candidate-image {
    width: 48px;
    height: 48px;
    float: left;
    margin: 0 10px 0 0;
}
.candidate-image img {
    width: 100%;
}

<!DOCTYPE html>
<html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/tried.css">
    <!--- FONTS --->
    <link href="https://fonts.googleapis.com/css?family=Domine|Roboto" rel="stylesheet" type='text/css'>
    <title>Importa Desde China</title>
</head>
<!--- Quitar Subrayado --->
<STYLE>
    A {
        text-decoration: none;
    }

</STYLE>
<!--- Quitar Subrayado --->

<body>
    <div class="candidates">
        <div class="candidate">
            <div class="candidate-image">
                <img src="https://i.imgur.com/6jVYOQa.jpg" alt="" title="" />
            </div>
            <!-- candidate-image -->

            <div class="candidate-details">
                <h3>Johnny Appleseed</h3>
                <h4>Space Monkey at NASA</h4>
            </div>
            <!-- candidate-details -->
        </div>
        <!-- candidate -->
    </div>
    <!-- candidates -->

</body>

</html>

检查溢出，https://www.w3schools.com/cssref/pr_pos_overflow.asp将自动修复所有尝试按照自己的方式进行的操作，而不会增加边距或填充

悬停边框将div移入父级

2 个答案: