Tips for creating item cards arranged in rows of three

I'm trying to create an e-commerce site and I want to display 3 items in a row. However, when I use flex, the cards stack on top of each other instead of forming a row. How can I align them properly? I believe the issue lies with the .product-item class. Can someone assist me with this problem, please? MY CSS:

    * {
   box-sizing: border-box;
   border: 1px #e2e2e2;
}
.product-item {
   width: 300px;
   height:205px;
   text-align: center;
   border: 1px #e2e2e2;
   background: white;
   font-family: "Roboto";
}

.product-item img {
   display: inline-block;
   width: 100%;
   border:  1px #e2e2e2;
}
.product-list {
   background: #fafafa;
   padding: 15px 0;
}
.product-list h3 {
   font-size: 20px;
   font-family: "Roboto";
   text-align: left;
   margin: 25px;
   font-weight: 400;
   color: #333333;
}
.product-list h4 {
   font-size: 15px;
   font-family: "Roboto";
   text-align: left;
   margin: 25px;
   font-weight: 400;
   color: #666666;
}
.sell {
   font-size: 20px;
   font-family: "Roboto";
   color: #333333;
   margin: 65px;

}
.price {
   font-size: 35px;
   text-align: left;
   font-family: "Roboto";
   color: #333333;
   margin: -65px;
}
.cart img {
   margin-top: -60px;
   margin-left: 200px;
   width: 15%;
}

My HTML:


<!DOCTYPE html> 
<html>
<head> 
<meta charset="UTF-8"> 
<title>Card Set</title> 
<link rel="stylesheet" type="text/css" href="cardset.css"> 
<script src="script.js"></script> 
</head>
<body>
    <div class="product-item">
  <img src="boots.png">
  <div class="product-list">
    <h3>Women's Boots</h3>
    <h4>Fashionable boots made from natural nubuck. Keep your feet warm during winter.</h4>
      <p><span class='price'>1999</span><span class='sell'>rub.</span><div class="cart"><img a href="" src="cart.png">

    

  </div>

</div>
    <div class="product-item">
  <img src="boots.png">
  <div class="product-list">
    <h3>Women's Boots</h3>
    <h4>Fashionable boots made from natural nubuck. Keep your feet warm during winter.</h4>
      <p><span class='price'>1999</span><span class='sell'>rub.</span><div class="cart"><img a href="" src="cart.png">
        
    

  </div>

</div>


</body>
</html>

Answer №1

You can enhance your product-item design with the following CSS styles:

Width:33%;
Display:inline-block;

Answer №2

There are several typographic errors present in your code, such as the class definition, extra spaces, and unclosed code sections within your CSS.

To align three items, you can utilize the flexbox display method. An example is provided below:

section {
display:flex;
}

.itemmm img {
width:100px;
height:100px;
margin:25px;
}
<html>
   <head>
      <meta charset="UTF-8">
      <title>Card set</title>
      <!-- Define document title -->
      <link rel="stylesheet" type="text/css" href="cardset.css">
      <script src="script.js"></script> 
   </head>
   <body>
   <section class="items-container">
      <div class="itemmm">
      <img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
      </div>
      <div class="itemmm">
      <img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
      </div>
      <div class="itemmm">
      <img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
      </div>
    </section>
      
   </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to avoid or halt focusing on the following input text element?

I came across a situation where I have to focus on the h1 element of an overlay instead of moving to the next tabbable element. The overlay appears after a service call triggered by blur event from the first input text field. Every time the blur event is ...

Increase the height of items in a top navigation bar in proportion to the height of the logo

Does anyone have a solution for how to make the links inside the div.topbar take up the full height of the container, especially when they are hovered over? I've extracted this specific feature and shared it [here][1]. I'm not sure if there&apos ...

Form Controller Indicates Missing Data

Issue Resolved I've encountered an issue with my form controller's values not populating when I submit the form - they remain as empty strings. My suspicion is that there might be an error on the HTML side. Here is the register.component.ts file ...

Pressing the tab key while using Angular will halt any additional processes from running

I recently integrated a search bar into my Angular application. When I enter text in the input field, a customized dropdown menu appears below it. However, when I press the tab key, I expect the dropdown to close and for the focus to shift to the next inpu ...

Utilizing jQuery and html5 for manipulating the DOM with append()/appendTo() functions while taking

Instructions on Replicating: Begin by creating an html5 page. Ensure that you have included the script from remysharp.com/2009/01/07/html5-enabling-script/ so that Internet Explorer can recognize the tags. Add a hardcoded <section id='anyt ...

Adjustable width box with shortened text

My challenge is to arrange 4 divs side by side, with the first two on the left, the fourth on the right, and the third filling the remaining space in between. The third div should have a dynamic width and contain two text lines that should support ellipsis ...

What is the best way to make my JSON data trigger an alert when the button on my HTML page is clicked?

I've been working hard to display JSON data containing information about the school name, degree type, semester enrollment, courses, and student details. However, I'm facing an issue where nothing happens when I click the button linked to a click ...

Ways to move Bootstrap 4 navbar list items to the right side?

Is there a way to move the li elements to the right without causing issues with the toggler or navbar? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand- ...

Utilizing SQL with PHP for Dynamically Populating an HTML Dropdown Menu

Having some trouble with PHP and SQL for a select option in an HTML form. I want to fill the select options with data from my sql table and then populate selections into a different table in sql. This is my first time working with PHP and SQL, so please be ...

Insert a variety of pictures into divs that share the same class

Can I target div elements with the same class in CSS and apply unique styles to each? Here is my HTML: <div class="image"><br/>a</div> <div class="image"><br/>b</div> <div class="image"><br/>c</div> ...

$shade "shade" is not a shade in Material Design

Whenever I attempt to incorporate variables into the Bootstrap SCSS theme map, an error occurs. This is how my SCSS looks: https://i.sstatic.net/RLH7M.png The specific error that I encounter is shown here: https://i.sstatic.net/IFthc.png ...

Align a link in the middle along with the header beside it

My HTML header currently has a simple title bar with a back href. However, the headline <h1> is positioned UNDER the href, which is not what I want. I am looking to create a centered title bar with a headline and a button that are aligned at the same ...

The jQuery function fails to execute when the script source is included in the head of the document

I'm relatively new to working with scripts and sources, assuming I could easily add them to the header and then include multiple scripts or functions afterwards. Everything seemed to be working fine at first, but now I've encountered a problem th ...

What are some clever ways to handle the transition of the display property?

While transitions for the display property may not work, I am exploring alternatives. I attempted using the visibility property but it didn't quite fit my needs. In my current setup, different text is displayed when hovering over an anchor tag by sett ...

Tips for properly formatting the data before sending it to an API

When a user submits a form, the data is sent to an API. It's important that every field appears on a new row in the output. Unfortunately, using \n and <br> inside the string does not produce the desired formatting. Can you help me with thi ...

Struggling to properly implement background images in a React application using Tailwind CSS

I'm currently developing a React application using Tailwind CSS for styling. In my project, I have an array of items called "trending," and I'm attempting to iterate through them to generate a series of divs with background images. However, I am ...

Creating an array with checkboxes alongside key values can be achieved by following these steps in JavaScript

I'm looking for assistance in creating an array that can be passed via ajax to a PHP page. Here is the HTML code snippet: $(document).ready(function() { $('.p_options').change(function() { if ($(this).is(":checked")) { $(this ...

the box is having trouble with its animation

This issue revolves around the use of CSS3 properties like -webkit-keyframes and -webkit-box-align. To learn more about this problem, please check out http://codepen.io/pleasureswx123/pen/fljFH /* sample css code */ <style> .box { di ...

Having trouble with a jQuery.validationEngine reference error?

Despite everything being correctly referenced, I am facing difficulties in getting it to function properly. It's strange because it worked once, but the validation message took 10 seconds to appear. After that, without making any changes, I tried agai ...

Issues with CSSClass not functioning properly within C# .NET applications

I have limited knowledge of .NET as I work primarily as an ERP Implementation Consultant. My experience with C# .NET is minimal, but I encounter a strange CSS issue in my C# projects. While the CSS functions correctly in Internet Explorer when running the ...