时间戳

首页 > 解决方案 > CSS Flex 容器问题

html - CSS Flex 容器问题

问题描述

我用我需要的 CSS 编写了代码，一切都很好。但是，在我保存并更新页面后，WordPress 出于某种原因破坏了我的 HTML 代码。由于某种原因添加了许多额外的标签，我无法弄清楚发生了什么变化。这是一个简单的 flexbox，其中包含三个原始容器。有图片，上面有文字。

现在，它在容器下方创建了一个额外的间隙，并且文本不可点击：

.flex-container {
  display: flex;
  flex-flow: row wrap;
    justify-content: space-around;
}

.centered-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container-main {
  position: relative;
  text-align: center;
    margin-bottom: 1em;
}


.a-main {
    color: white; 
    font-family: Roboto, sans-serif ;
    font-size: 1.4em;
    line-height: 1em;
    font-weight: 900;
        text-shadow: 1px 1px 3px rgba(0,0,0,.7);

}

.container-main:hover {
 border: 5px #f9a019 solid;
}
<div class="flex-container">
 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/treat-dispensing-dog-cameras-3.jpeg" alt="Treat dispensing dog cameras is one of the best dog technologies so far" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Treat Dispensing Dog Cameras</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/electronic-dog-bone-1.jpeg" alt="Dog is playing with electronic interative bone gadget" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Electronic Interactive Dog Toys</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/dog-gps-collar.jpeg" alt="GPS collar is one of the best gadgets for not losing your dog" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">GPS Tracking Collars</span></div>
 </div>
</div>

<div class="flex-container">
 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/dog-fitness-tracker.jpeg" alt="Dog fitness tracker is amazing gadget to track your dog's activity and health." width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Dog Activity Monitors</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/led-dog-collar-and-leash.jpeg" alt="LED collar and leash is a must have cool dog gadget." width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">LED Collars</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/smart-feeder-for-dogs.jpeg" alt="Smart feeder is an innovate dog technology that allows to to schedule feeding using a smartphone app" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Smart Feeders</span></div>
 </div>
</div>

<div class="flex-container">
 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/dogtra-training-collar.jpeg" alt="Training collar is the hi tech device for training your dog." width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Dog Training Collars</span></div>
 </div>


 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/dog-treadmill-dogpacer.jpeg" alt="Dog treadmill dog gadgets category." width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Dog Treadmills</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/citronella-spray-collar.jpeg" alt="Citronella collar is a dog gadget that help with extensive dog barking" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Citronella Spray Collars</span></div>
 </div>
</div>

<div class="flex-container">
 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/invisible-dog-fence.jpeg" alt="Dog is running with invisible dog fence installed" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Invisible Dog Fences</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/dog-translator.jpeg" alt="Dog translator is a special device that can translate dog barks to human language." width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Dog Language Translators</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/dog-electric-trimmer.jpeg" alt="Electric nail trimmer device for dogs" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Electric Nail Trimmers</span></div>
 </div>
</div>

<div class="flex-container">
 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/automatic-ball-launcher.jpeg" alt="Automatic ball launcher is a perfect gadget for dogs" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Automatic Ball Launchers</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/innovative-bathing-tool-barkbath.jpeg" alt="Barkbath is a portable bathing device for dogs." width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Innovative Bathing Tools</span></div>
 </div>

 <div class="container-main"><a href="#"><img class="background-main" src="https://technobark.com/wp-content/uploads/2020/12/indoor-dog-toilet.jpeg" alt="Device like indoor dog potty could be handy for indoor peeing training" width="200" height="200" /></a>
 <div class="centered-main"><span class="a-main">Indoor Dog Potties</span></div>
 </div>
</div>

谁能告诉我怎么了？

标签： htmlcssflexbox

解决方案

  1. 我们知道 word-press 使用主题，并且该主题的相应布局已添加到我们的代码中。
  2. 最好的调试方法是使用开发者控制台 (Ctrl+shift+I)并检查添加了哪些额外元素以及哪些extra CSS正在修改哪些元素。
  3. 然后，您需要自己在 CSS 文件中覆盖所有这些更改以获得所需的结果。您可能需要使用!important您的 CSS 属性值来覆盖内联样式。

推荐阅读