时间戳

首页 > 解决方案 > How to align 3 div's on 1 row

html - How to align 3 div's on 1 row

问题描述

Trying to make 3 of my div's (cards) to fit in one line, and it keeps going for all my divs

Code:

<style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  width: 40%;
  height: 35%;
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 

</style>
<body>

<div class="card" button data-autobuy-product="62011137-f68d-4855-6346-08d8082eae6a">
  <img src="images/otmasterpack.jpg"alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>Onetap Master Package</b></h4>
    <p>Master config & private javascript</p>
    <p id="pricing">CHF 10.99</p>
  </div>
</div> 

<div class="card" button data-autobuy-product="313fc0d8-ac51-4502-4aa5-08d7e16061ca">
    <img src="images/onetap_master.jpg"alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>Onetap Master Config</b></h4>
      <p>Premium Javascripts, lifetime updates</p>
      <p id="pricing">CHF 7.99</p>
    </div>
  </div> 

<div class="card" button data-autobuy-product="b6a12f14-d28e-40b7-6330-08d8082eae6a">
<img src="images/otmasterpack.jpg"alt="Avatar" style="width:100%">
<div class="container">
      <h4><b>Onetap Script</b></h4>
      <p>Private script with Anti-Aim, doubletap, indicators & more</p>
      <p id="pricing">CHF 5.99</p>
    </div>
</div> 

<div class="card" button data-autobuy-product="bc952720-a1d9-4b78-4aa2-08d7e16061ca">
<img src="images/aimwarepack.jpg"alt="Avatar" style="width:100%">
<div class="container">
      <h4><b>Aimware Master Package</b></h4>
      <p>Multiple private configs with with anti-aim lua</p>
      <p id="pricing">CHF 10.99</p>
    </div>
</div> 

<div class="card" button data-autobuy-product="d186c7c9-d93f-493f-4aa4-08d7e16061ca">
<img src="images/awlua.jpg"alt="Avatar" style="width:100%">
<div class="container">
      <h4><b>Aimware Anti-Aim Lua</b></h4>
      <p>Private Aimware Anti-Aim lua</p>
      <p id="pricing">CHF 5.99</p>
    </div>
</div> 

<div class="card" button data-autobuy-product="19fb04a6-641a-4180-4b5a-08d7e16061ca">
<img src="images/personal.jpg"alt="Avatar" style="width:100%">
<div class="container">
      <h4><b>Personal Config</b></h4>
      <p>Private config made for you until it's good.</p>
      <p id="pricing">CHF 14.99</p>
    </div>
</div> 

<div class="card" button data-autobuy-product="db590a66-14e4-428c-e275-08d8059e10a6">
<img src="images/class.jpg"alt="Avatar" style="width:100%">
<div class="container">
      <h4><b>Config Class</b></h4>
      <p>Learn to sell your configs and make profit</p>
      <p id="pricing">CHF 24.99</p>
    </div>
</div> 

<div class="card" button data-autobuy-product="19fb04a6-641a-4180-4b5a-08d7e16061ca">
<img src="images/class.jpg"alt="Avatar" style="width:100%">
<div class="container">
      <h4><b>Config Swap</b></h4>
      <p>Switch one of my configs to another one</p>
      <p id="pricing">CHF 5.99</p>
    </div>
</div>

If it's possible I'd want the first 3 divs to the next to eachother on one row, then the next 3, etc.

Expected (pic taken from a different site) Expected

What it's currently showing

Actual

getting It looks like your post is mostly code; please add some more details. but i think i already explained it well enough.

标签： htmlcss

解决方案

You may use flex to align 3 divs per row. More flex guide can refer here

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  /* 5px rounded corners */
  width: 40%;
  height: 35%;
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 10px;
}
/* Flex configuration to align 3 divs per row */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-container > .card {
  flex-basis: 30%;
  margin: 1%;
}
<body>

  <div class="flex-container">
    <div class="card" button data-autobuy-product="62011137-f68d-4855-6346-08d8082eae6a">
      <img src="images/otmasterpack.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Onetap Master Package</b></h4>
        <p>Master config & private javascript</p>
        <p id="pricing">CHF 10.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="313fc0d8-ac51-4502-4aa5-08d7e16061ca">
      <img src="images/onetap_master.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Onetap Master Config</b></h4>
        <p>Premium Javascripts, lifetime updates</p>
        <p id="pricing">CHF 7.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="b6a12f14-d28e-40b7-6330-08d8082eae6a">
      <img src="images/otmasterpack.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Onetap Script</b></h4>
        <p>Private script with Anti-Aim, doubletap, indicators & more</p>
        <p id="pricing">CHF 5.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="bc952720-a1d9-4b78-4aa2-08d7e16061ca">
      <img src="images/aimwarepack.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Aimware Master Package</b></h4>
        <p>Multiple private configs with with anti-aim lua</p>
        <p id="pricing">CHF 10.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="d186c7c9-d93f-493f-4aa4-08d7e16061ca">
      <img src="images/awlua.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Aimware Anti-Aim Lua</b></h4>
        <p>Private Aimware Anti-Aim lua</p>
        <p id="pricing">CHF 5.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="19fb04a6-641a-4180-4b5a-08d7e16061ca">
      <img src="images/personal.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Personal Config</b></h4>
        <p>Private config made for you until it's good.</p>
        <p id="pricing">CHF 14.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="db590a66-14e4-428c-e275-08d8059e10a6">
      <img src="images/class.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Config Class</b></h4>
        <p>Learn to sell your configs and make profit</p>
        <p id="pricing">CHF 24.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="19fb04a6-641a-4180-4b5a-08d7e16061ca">
      <img src="images/class.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Config Swap</b></h4>
        <p>Switch one of my configs to another one</p>
        <p id="pricing">CHF 5.99</p>
      </div>
    </div>
  </div>

Or you may use grid to align 3 divs in a row.

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  /* 5px rounded corners */
  /* width: 40%; 
  height: 35%; */
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 10px;
}
/* Grid configuration to align 3 divs per row */
.grid-container {
  display: grid;
  grid-row-gap: 20px;
  grid-column-gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}
<body>

  <div class="grid-container">
    <div class="card" button data-autobuy-product="62011137-f68d-4855-6346-08d8082eae6a">
      <img src="images/otmasterpack.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Onetap Master Package</b></h4>
        <p>Master config & private javascript</p>
        <p id="pricing">CHF 10.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="313fc0d8-ac51-4502-4aa5-08d7e16061ca">
      <img src="images/onetap_master.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Onetap Master Config</b></h4>
        <p>Premium Javascripts, lifetime updates</p>
        <p id="pricing">CHF 7.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="b6a12f14-d28e-40b7-6330-08d8082eae6a">
      <img src="images/otmasterpack.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Onetap Script</b></h4>
        <p>Private script with Anti-Aim, doubletap, indicators & more</p>
        <p id="pricing">CHF 5.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="bc952720-a1d9-4b78-4aa2-08d7e16061ca">
      <img src="images/aimwarepack.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Aimware Master Package</b></h4>
        <p>Multiple private configs with with anti-aim lua</p>
        <p id="pricing">CHF 10.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="d186c7c9-d93f-493f-4aa4-08d7e16061ca">
      <img src="images/awlua.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Aimware Anti-Aim Lua</b></h4>
        <p>Private Aimware Anti-Aim lua</p>
        <p id="pricing">CHF 5.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="19fb04a6-641a-4180-4b5a-08d7e16061ca">
      <img src="images/personal.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Personal Config</b></h4>
        <p>Private config made for you until it's good.</p>
        <p id="pricing">CHF 14.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="db590a66-14e4-428c-e275-08d8059e10a6">
      <img src="images/class.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Config Class</b></h4>
        <p>Learn to sell your configs and make profit</p>
        <p id="pricing">CHF 24.99</p>
      </div>
    </div>

    <div class="card" button data-autobuy-product="19fb04a6-641a-4180-4b5a-08d7e16061ca">
      <img src="images/class.jpg" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>Config Swap</b></h4>
        <p>Switch one of my configs to another one</p>
        <p id="pricing">CHF 5.99</p>
      </div>
    </div>
  </div>

推荐阅读