个人中心
gpt4 book ai didi

javascript - 为什么我的添加到购物车按钮出现在图像旁边而不是图像下方，即使使用换行标记也是如此？

转载 作者：行者123 更新时间：2023-11-27 23:44:36 25 4
gpt4 key购买 nike

我正在创建一个电子商务网站。我有一个标题和一个侧边栏。然后是主体部分。在主体部分，我有一个特色产品标题。然后我在特色产品标题下方有一些图片，我将用实际图片替换它们。但是当我添加图片时，我还在每张图片下方添加了“添加到购物车”按钮。但是当我添加一个按钮时，它会直接出现在图像上而不是在图像下方。即使我有换行符标记。一些帮助将不胜感激

谢谢

index.php

<?php
require_once 'Partials/header.php';
 ?>
 <br><br><br><br>
 <link rel="stylesheet" type="text/css" href="Styles/Style.css">

<div class="main_wrapper">
<?php
    require_once 'Partials/sidebar.php';
?>


  <!--The main body section start here-->
<div class="main">
    <!--Featured Products List Starts Here-->

    <h2 style="text-align: center;">Featured Products</h2>
  <div class="container">
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
    </div>
<h2 style="text-align: center;">New Arrivals</h2>
    <div class="container 2">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>
<h2 style="text-align: center;">Clothes</h2>
    <div class="container 3">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>
<h2 style="text-align: center;">Brands</h2>
    <div class="container 4">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>

  <style>
      .container {
        display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow: auto;
      justify-content: space-between;
      }
      .container > img {
        display: block;
        margin-top: 5px;
      }

    </style>


  <!--Featured Products List Ends Here-->
  <button name="Black">Black</button>
</div>
<!--The main body section ends here-->

<!--Back To Top Coding Starts Here-->
<head>
<style>

    #back-to-top-btn{
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
        width: 50px;
        height: 50px;
        background-color: #fff;
        color: #333;
        cursor: pointer;
        outline: none;
        border: 3px solid #333;
        border-radius: 50%;
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
        transition-property: background-color, color;
    }

    #back-to-top-btn:hover, #back-to-top-btn:focus{
        background-color: #333;
        color: #fff;
    }

    /* Animations */
.btnEntrance {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: btnEntrance;
}
/* zoomIn */
/* @keyframes btnEntrance {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
} */

/* fadeInUp */
@keyframes btnEntrance {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.btnExit {
  animation-duration: 0.25s;
  animation-fill-mode: both;
  animation-name: btnExit;
}
/* zoomOut */
/* @keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
} */

/* fadeOutDown */
@keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

</style>
</head>
  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>

<script src="js/Back_To_Top.js"></script>
<!--Back To Top Coding Ends Here-->
</div>

</body>
</html>

然后这是header.php

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Home - Diamond Collections</title>
        <script src="https://kit.fontawesome.com/1cde82a3ba.js"></script>
        <style>



            @import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');

:root {
  --background: rgba(0, 214, 170, .85);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
    margin: 0;
    /*background-image: radial-gradient(circle, red, yellow, green);*/
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

.content {

}

/* navigation styles start here */

header {
  background: var(--background);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
}

/* changed this from the tutorial video to
   allow it to gain focus, making it tabbable */
.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
  outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
    height: 76px
  }

  .logo {
    grid-column: 2 / 3;
    position: absolute;

    height: 200px;
    //transform: scale(2,2);

  }

  nav {
    // all: unset; /* this causes issues with Edge, since it's unsupported */

    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1,1);
    background: none;
    top: initial;
    left: initial;
    /* end Edge support stuff */

    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul {
    display: flex;
  }

  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }

  nav a {
    opacity: 1;
    position: relative;
  }

  nav a::before {
    content: '';
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    top: 1.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }

  nav a:hover::before {
    transform: scale(1,1);
  }
}






h1 {
     margin:0
}

.logo a {
     display: flex;
     justify-content: center;
}

.logo img {
    height: 74px;
    margin-top: 1.1px;
}




        </style>
    </head>
    <body>
        <header>
  <h1 class="logo"><a href="#"><img src="Images/Logo5.JPG"></a></h1>
  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </nav>
      <form action="" method="" class="search" style="margin-top: 24px;">
      <input type="" name="search" placeholder="Search..." style="padding: 5px; font-size: 15px">
      </form>
  <label for="nav-toggle" class="nav-toggle-label">
    <span></span>
  </label>

</header>

然后这是sidebar.php

<style>

    .sidenav {
  height: 100%;
  width: 160px;
  margin-top: 6.1%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

</style>

<div class="sidenav">
  <a href="#">New Arrivals</a>
  <a href="#">Featured</a>
  <a href="#">Clothes</a>
  <a href="#">Brands</a>
</div>

最佳答案

我检查了你的代码，你没有得到你想要的结果的原因是你把所有东西都放在了 div CONTAINER 里。

您放置 IMG BUTTON IMG BUTTON IMG BUTTON IMMG BUTTON，这样当代码运行时，它会以直线显示所有内容。

为了获得您想要的结果，您需要在容器 div 中使用更多 div 来构建代码。

示例:

<div class="container">
     <div class="test">
        <img src="Images/Logo5.JPG">
        <button>Add to cart</button>
     </div>
     <div class="test">
        <img src="Images/Logo5.JPG">
        <button>Add to cart</button>
     </div>
     <div class="test">
        <img src="Images/Logo5.JPG">
        <button>Add to cart</button>
     </div>
     <div class="test">
        <img src="Images/Logo5.JPG">
        <button>Add to cart</button>
     </div>
</div>

如果您需要更多帮助，请告诉我。P.S 将您的样式代码保存在 style.css 而不是 html 文件中。

关于javascript - 为什么我的添加到购物车按钮出现在图像旁边而不是图像下方，即使使用换行标记也是如此？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56869520/

25 4 0
文章推荐： javascript - 如何将 LocalStorage 功能添加到我的 TODO 列表中。如何以及在什么时候？
文章推荐： jquery - 如何使用 TinySort 进行排序
文章推荐： c++ - 从 MATLAB 到 C++ : equivalent of bwmorph with option 'remove'
文章推荐： javascript - 在 'onclick' 事件上打开固定窗口 - javascript 和 html
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com