Wie verschiebe ich Bilder nebeneinander?

Ich versuche, eine index.html zu erstellen, die Autoteile und Zubehör enthält. Ähnlich wie die meisten Auto Teile Websites wie AutoZone. Ich möchte, dass die Produkte mit einem Bild und einer Beschreibung darunter angezeigt werden.Wie verschiebe ich Bilder nebeneinander?

Ich bin mir bewusst, dass in CSS, dass ich die Bilder links schweben kann, aber wenn ich dies tun, kommen sie in einer Diagonale statt horizontal über meinen Bildschirm.

Code eingeben hier

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

Quelle

2017-12-18 Demetri Bethel

Können Sie bitte bearbeiten Sie Ihre Post Ihre CSS und HTML-Code enthalten? – Mike

Willkommen bei Stack Overflow. Diese Website ist für die Lösung von gut geschriebenen Fragen über programmbezogene Probleme gedacht, möglicherweise illustriert mit Feedback, Fehlerberichten, Code-Schnipsel und Links zu illustrativen Bildern. – StarShine

Ich habe den HTML-Code hinzugefügt. Ich versuche, jede Hilfe zu stylen, so weit CSS geschätzt wird. –

Mir wurde langweilig, also habe ich das für dich gemacht.

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>

Quelle

2017-12-20 21:26:36

Vielen Dank eine Menge von Ihrem HTML-Matches meins jetzt ist dies ein großartiger Leitfaden für mich –

Kein Problem, es hat Spaß gemacht! –

Gute Arbeit! :))) –

diesen Code in Ihrem CSS versuchen und sehen, ob es wird Sie wollen Sie wollen.

div { 
    display: inline; 
}

Quelle

2017-12-18 19:09:27 Corey

Das hat meinen Text nicht getrennt und meine Bilder sind in einer Linienformation. –

versuchen, etwas wie folgt aus:

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

Anzeige: inline-block; Richten Sie den Block in derselben Zeile aus. Durch die vertikale Ausrichtung werden sie in der Mitte ausgerichtet. Und wenn Sie die Breite angeben: 49%, nehmen sie die gleiche Breite an.

Hat das Ihre Frage beantwortet?

Quelle

2017-12-19 10:37:37

Dies legte meinen Text Seite an Seite zu meinen Bildern, das ist besser. Ich schätze all die Hilfe. –

Wie verschiebe ich Bilder nebeneinander?

Antwort

Verwandte Themen