如何并排移动图像？

问题描述 投票：2回答：3

我正在尝试创建一个index.html，其中包含汽车零件和配件。类似于AutoZone等大多数汽车零件网站。我希望产品在下面显示img和description。

我知道在CSS中我可以浮动图像，但是当我这样做时，它们会在屏幕上横向倾斜而不是横向移动。

在此处输入代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Real Truck-Performance Parts & Accessories</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script type="text/javascript" src="app.js"></script>
  </head>

  <nav id="nav"></nav>

  <body>
<img class="top-corner" src="front-end-dev-test/assets/realtruck_horizontal.svg" alt="">


    <div id="app">
      <img class="headerPic" src="front-end-dev-test/assets/truck.png" alt="Header Pic">

    </div>
<ul>


<div id="ProductList1">
      <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
      class="productClass" >
<div class="price"><span>Fuel Black Triton Wheels
<strong>From $90 </strong></span></div>


      <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
      class="productClass" >
<div class="price"><span>Fuel Black Triton Wheels</span></div>

<img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
class="productClass" >
<div class="price"><span>Fuel Black Triton Wheels</span></div>
  </div>

  <div id="ProductList2">
    <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
    class="productClass" >
    <div class="price"><span>Fuel Black Triton Wheels</span></div>

    <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
    class="productClass" >
    <div class="price"><span>Fuel Black Triton Wheels</span></div>

    <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
    class="productClass" >
    <div class="price"><span>Fuel Black Triton Wheels</span></div>

  </div>

<div id="ProductList3">
    <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
    class="productClass" >
    <div class="price"><span>Fuel Black Triton Wheels</span></div>

    <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
    class="productClass" >
    <div class="price"><span>Fuel Black Triton Wheels</span></div>

    <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
    class="productClass" >
    <div class="price"><span>Fuel Black Triton Wheels</span></div>


  </div>

<div id="productList4">
    <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
  class="productClass" >
  <div class="price"><span>Fuel Black Triton Wheels</span></div>

  <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
      class="productClass" >
  <div class="price"><span>Fuel Black Triton Wheels</span></div>

  <img class="imageSize" src="front-end-dev-test/assets/wheel.png" alt="product"
      class="productClass" >
  <div class="price"><span>Fuel Black Triton Wheels</span></div>

  </div>


  </body>
  </ul>
</html>
html image css3
3个回答
2
投票

我很无聊，所以我为你做了这个。

var navbar = document.getElementById("nav-bar");
var menubtn = document.getElementById("menu-button");
var sidenav = document.getElementById("mySidenav");
var main = document.getElementById("main");
var overlay = document.getElementById("overlay");

function toggleNav() {
  if (menubtn.classList.contains("change")) {
    sidenav.style.left = "-250px";
    main.style.marginLeft = "0";
    overlay.style.display = "none";
    navbar.style.position = "";
    navbar.style.marginLeft = "";
    menubtn.classList.remove("change");
  } else {
    sidenav.style.left = "0";
    main.style.marginLeft = "250px";
    overlay.style.display = "block";
    navbar.style.position = "absolute";
    navbar.style.marginLeft = "250px";
    menubtn.classList.add("change");
  }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == overlay) {
    sidenav.style.left = "-250px";
    main.style.marginLeft = "0";
    overlay.style.display = "none";
    navbar.style.position = "";
    navbar.style.marginLeft = "";
    menubtn.classList.remove("change");
  }
}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
* {
  box-sizing: border-box;
}


/* Drop the ".t-" so that you target the body if you use this */
.t-body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
  margin: 0;
  padding: 0;
}

.nav-bar {
  width: 100%;
  padding: 10px;
  overflow-x: hidden;
  z-index: 2;
}

.menu-container {
  position: absoulute;
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  background-color: #fff;
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  background-color: #fff;
  opacity: 0;
}

.change .bar3 {
  background-color: #fff;
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.sidenav {
  height: 100%;
  overflow-x: hidden;
  position: absolute;
  z-index: 2;
  width: 250px;
  left: -250px;
  top: 0;
  background-color: #111;
  transition: 0.5s;
}

#overlay {
  display: none;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

#main {
  transition: margin-left .5s;
  z-index: 1;
}

.maxScreenSize {
  margin: 0 auto;
  max-width: 1280px;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel a {
  color: black;
  padding: 14px;
  text-decoration: none;
  display: block;
  width: 100%;
  transition: background-color 0.2s ease-out;
}

.panel a:hover {
  background-color: #b2b2b2;
}

.responsive-img {
  overflow: hidden;
}

.responsive-img img {
  width: 100%;
}

.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}

.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.price li {
  padding: 20px;
  text-align: center;
}

.price .grey {
  background-color: #eee;
  font-size: 18px;
}

.price .title {
  font-size: 20px;
}

.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 25px;
  text-align: center;
  font-size: 18px;
}

.button:hover {
  cursor: pointer;
  background-color: #449d48;
}

@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="t-body">
  <div id="mySidenav" class="sidenav">
    <button class="accordion">Tires & Wheels</button>
    <div class="panel">
      <a href="#">Link One</a>
      <a href="#">Link Two</a>
      <a href="#">Link Three</a>
    </div>

    <button class="accordion">Body Parts</button>
    <div class="panel">
      <a href="#">Link One</a>
      <a href="#">Link Two</a>
      <a href="#">Link Three</a>
    </div>

    <button class="accordion">Interior Accessories</button>
    <div class="panel">
      <a href="#">Link One</a>
      <a href="#">Link Two</a>
      <a href="#">Link Three</a>
    </div>
  </div>

  <div class="nav-bar" id="nav-bar">
    <div class="menu-container" id="menu-button" onclick="toggleNav();">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </div>

  <div class="maxScreenSize">
    <div id="main">
      <div id="overlay"></div>

      <!-- Row 1 -->
      <div class="columns">
        <ul class="price">
          <li class="responsive-img"><img src="https://www.carid.com/images/fuel/wheels/fuel-triton-deep-lip-black-milled-accents.jpg" alt="product"></li>
          <li class="title">Fuel Black Triton Wheels</li>
          <li class="grey">From $90</li>
          <li class="button" onclick="window.open('https://stackoverflow.com/questions/47874090/how-do-i-move-images-side-by-side');">Check Inventory</li>
        </ul>
      </div>
      <div class="columns">
        <ul class="price">
          <li class="responsive-img"><img src="https://www.carid.com/images/fuel/wheels/fuel-triton-deep-lip-black-milled-accents.jpg" alt="product"></li>
          <li class="title">Fuel Black Triton Wheels</li>
          <li class="grey">From $90</li>
          <li class="button" onclick="window.open('https://stackoverflow.com/questions/47874090/how-do-i-move-images-side-by-side');">Check Inventory</li>
        </ul>
      </div>
      <div class="columns">
        <ul class="price">
          <li class="responsive-img"><img src="https://www.carid.com/images/fuel/wheels/fuel-triton-deep-lip-black-milled-accents.jpg" alt="product"></li>
          <li class="title">Fuel Black Triton Wheels</li>
          <li class="grey">From $90</li>
          <li class="button" onclick="window.open('https://stackoverflow.com/questions/47874090/how-do-i-move-images-side-by-side');">Check Inventory</li>
        </ul>
      </div>

      <!-- Row 2 -->
      <div class="columns">
        <ul class="price">
          <li class="responsive-img"><img src="https://www.carid.com/images/fuel/wheels/fuel-triton-deep-lip-black-milled-accents.jpg" alt="product"></li>
          <li class="title">Fuel Black Triton Wheels</li>
          <li class="grey">From $90</li>
          <li class="button" onclick="window.open('https://stackoverflow.com/questions/47874090/how-do-i-move-images-side-by-side');">Check Inventory</li>
        </ul>
      </div>
      <div class="columns">
        <ul class="price">
          <li class="responsive-img"><img src="https://www.carid.com/images/fuel/wheels/fuel-triton-deep-lip-black-milled-accents.jpg" alt="product"></li>
          <li class="title">Fuel Black Triton Wheels</li>
          <li class="grey">From $90</li>
          <li class="button" onclick="window.open('https://stackoverflow.com/questions/47874090/how-do-i-move-images-side-by-side');">Check Inventory</li>
        </ul>
      </div>
      <div class="columns">
        <ul class="price">
          <li class="responsive-img"><img src="https://www.carid.com/images/fuel/wheels/fuel-triton-deep-lip-black-milled-accents.jpg" alt="product"></li>
          <li class="title">Fuel Black Triton Wheels</li>
          <li class="grey">From $90</li>
          <li class="button" onclick="window.open('https://stackoverflow.com/questions/47874090/how-do-i-move-images-side-by-side');">Check Inventory</li>
        </ul>
      </div>
    </div>
  </div>
</div>
0
投票

在CSS中尝试此代码，看看它是否符合您的要求。

div {
    display: inline;
}
0
投票

尝试这样的事情：

.imageSize, .price{
  display:inline-block;
  vertical-align:middle;
  width:49%;
}

显示：内联块;将块对齐在同一行上。垂直对齐使它们在中间对齐。如果指定宽度：49％，它们将采用相同的宽度。

这回答了你的问题吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.