Question

我想使用Javascript更改“logos”类中我的一个元素的宽度。但是当我将“logos”类中目标元素的宽度更改为5.9％时，其他元素的位置也会发生变化。当我增加共享div中图像的大小时，我希望定位其他元素不会改变。有没有办法解决这个问题？我很擅长css，谢谢你的帮助。

HTML：

<!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" type="text/css" href="index.css"> 
<title>Sexism in Silicon Valley</title>
</head>
<body id="body">
<div class="parentz"id="parent1">
    <img src="img1.png" class="logos" id="id1">
    <img src="img2.png" class="logos" id="id2">
    <img src="img3.png" class="logos" id="id3">
    <img id="id4" src="img4.png" class="logos">
</div>
<div class="parentz" id="parent2">
    <img src="img5.png" class="logos" id="id5">
    <img src="img6.png" class="logos" id="id6">
    <img src="img7.png" class="logos" id="id7">
    <img src="img8.png" class="logos" id="id8">
</div>
<script src="index.js"></script>
</body>

</html>

的CSS：

body { 
    background: #907D7C; 
    -webkit-transition: background 1.5s;

} 
.parentz {
    background: #907D7C;
    text-align: center;
    margin-top: 9%;
    border: white;
    border: 5px;


    -webkit-transition: background 1.5s;

}

#parent2 {
    margin-top: 3%;

}

.logos {
    width: 5.5%;
    height: 18%;
    border-radius: 90px;  
    margin-right: 25px; 
    padding: .5%;

}

Answer 1

添加另一个类，例如'logoslarge'，并使用它来覆盖大小，这样你就可以将'logos logoslarge'作为该元素的类。然后你就可以写了

.logoslarge {width：5.9％}

这仅适用于那些拥有新类的元素。

如何在保持其他所有元素相同的同时更改类中只有一个元素的大小？

1 个答案: