어떻게 이미지를 나란히 이동합니까?

저는 자동차 부품 및 액세서리를 다루는 index.html을 만들려고합니다. AutoZone과 같은 대부분의 자동차 부품 웹 사이트와 유사합니다. 나는 아래에 img와 설명으로 제품을 보여주고 싶다.어떻게 이미지를 나란히 이동합니까?

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>

출처

2017-12-18 Demetri Bethel

당신은 당신의 CSS와 HTML 코드를 포함하도록 게시물을 수정할시겠습니까? – Mike

스택 오버플로에 오신 것을 환영합니다. 이 사이트는 프로그래밍 관련 문제에 대한 잘 쓰여진 질문을 해결하기위한 것으로 피드백, 버그 보고서, 코드 스 니펫 및 예시 이미지에 대한 링크가있을 수 있습니다. – StarShine

나는 HTML을 추가했다. 나는 CSS 스타일에 도움이되도록 노력하고있다. –

나는 지루해 졌어. 그래서 나는 너에게 이것을 만들었다.

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%; 
 
}

디스플레이 : 인라인 블록; 동일한 행에 블록을 정렬하십시오. 세로로 정렬하면 가운데에 정렬됩니다. 너비 : 49 %를 지정하면 동일한 너비가 사용됩니다.

질문에 대한 답변을 했습니까?

출처

2017-12-19 10:37:37

이것은 내 텍스트를 내 이미지와 나란히 배치하여 더 좋았습니다. 나는 모든 도움에 감사한다. –