どのようにイメージを並べて移動しますか？

私は車の部品やアクセサリーを扱うindex.htmlを作成しようとしています。 AutoZoneのようなほとんどの自動車部品のウェブサイトに似ています。私は製品の下にimgと説明を表示したい。どのようにイメージを並べて移動しますか？

私は、画像を左に浮かべることができることを知っていますが、そうしたときには画面の横に斜めに斜めに来ます。

は、ここでは、コード

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

出典

2017-12-18 Demetri Bethel

あなたのCSSとHTMLコードを含めるように自分の投稿を編集してくださいことはできますか？ – Mike

ようこそスタックオーバーフロー。このサイトはプログラミング関連の問題に関するよくある質問を解決するためのもので、フィードバック、バグレポート、コードスニペット、例示的な画像へのリンクなどがあります。 – StarShine

私はHTMLを追加しました。 –

私は退屈になったので、私はあなたのためにこれを作った。

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>

出典

2017-12-20 21:26:36

これは私のための素晴らしいガイドです今あなたのhtmlのマッチの多くがありがとう –

問題はない、それは楽しいでした！ –

いいですね！ :)）） –

あなたのCSSでこのコードを試してみて、それはあなたが欲しい欲しい取得するかどうかを確認を入力してください。

div { 
    display: inline; 
}

出典

2017-12-18 19:09:27 Corey

それは私のテキストを分離しなかったし、私のイメージはラインフォーメーションである。 –

このような何か試してみてください：

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

ディスプレイ：インラインブロック;同じ行のブロックを整列させます。縦に並べると、中央に揃えます。 width：49％を指定すると、同じ幅になります。

あなたの質問にお答えしましたか？

出典

2017-12-19 10:37:37

これは私のイメージを私のイメージと並べて置いた方が良いです。私はすべての助けに感謝します。 –

どのようにイメージを並べて移動しますか？

答えて

関連する問題