Блог

Главная - Вопросы по программированию - Проблема с гибким контейнером CSS

Проблема с гибким контейнером CSS

#html #css #flexbox

#HTML #css — код #гибкий ящик

Вопрос:

Я написал код с помощью CSS, который мне был нужен, и все было в порядке. Однако WordPress по какой-то причине сломал мой HTML-код после того, как я его сохранил, и страница обновилась. По какой-то причине было добавлено много дополнительных тегов, и я не могу понять, что было изменено. Это простая гибкая коробка с тремя контейнерами в исходном виде. На нем есть изображения с текстом .

Теперь это создает дополнительный зазор под контейнером, а также текст, который нельзя кликнуть:

 .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>

Кто-нибудь может сказать мне, что не так?

Ответ №1:

Надеюсь, это поможет, я добавил около 3 строк изменений. Кроме того, изменил эти теги «span» на теги «link».

 .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;
    border: 5px transparent solid;  /* new stuff */
    cursor: pointer;  /* new stuff */
}

   .background-main{
  display: block; /* new stuff */

   }


.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);
text-decoration : none; /* new stuff */
}

.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"><a href="#" class="a-main">Treat Dispensing Dog Cameras</a></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"><a href="#" class="a-main">Electronic Interactive Dog Toys</a></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"><a href="#"class="a-main">GPS Tracking Collars</a></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"><a href="#" class="a-main">Dog Activity Monitors</a></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"><a href="#" class="a-main">LED Collars</a></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"><a href="#" class="a-main">Smart Feeders</a></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"><a href="#" class="a-main">Dog Training Collars</a></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"><a href="#" class="a-main">Dog Treadmills</a></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"><a href="#" class="a-main">Citronella Spray Collars</a></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"><a href="#" class="a-main">Invisible Dog Fences</a></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"><a href="#" class="a-main">Dog Language Translators</a></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"><a href="#" class="a-main">Electric Nail Trimmers</a></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"><a href="#" class="a-main">Automatic Ball Launchers</a></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"><a href="#" class="a-main">Innovative Bathing Tools</a></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"><a href="#" class="a-main">Indoor Dog Potties</a></div>
 </div>
</div>

Ответ №2:

  1. Мы знаем, что word-press использует темы, и соответствующий макет этой темы добавляется в наш код.
  2. Лучший способ отладки — использовать консоль разработчика (Ctrl shift I) и проверить, какие дополнительные элементы добавлены и какие extra CSS элементы изменяются.
  3. Затем вам нужно переопределить все эти изменения самостоятельно в вашем файле CSS, чтобы получить желаемые результаты. Возможно, вам потребуется использовать !important значения свойств CSS для переопределения встроенных стилей.