堆棧內存溢出
  簡體   English   中英

如何在 1 行對齊 3 個 div

[英]How to align 3 div's on 1 row

 原文  2020-06-30 15:13:02  7   1    html/ css

問題描述

試圖讓我的 3 個 div （卡片）適合一行，並且它一直適用於我所有的 div

代碼：

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

如果可能的話，我希望前 3 個 div 在一行中彼此相鄰，然后是下一個 3，依此類推。

預期（圖片取自不同網站） 預期的

目前顯示的內容

實際的

看起來你的帖子主要是代碼； 請添加更多細節。 但我想我已經解釋得很好了。

1 個解決方案

解決方案1
 1 已采納  2020-06-30 15:29:12

您可以使用 flex 每行對齊 3 個 div。 更多 flex 指南可以參考這里

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

或者你可以使用 grid 來連續對齊 3 個 div。 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何對齊DIV的內聯？ 如何在DIV中正確對齊DIV 如何在引導程序中對齊一行 div 的底部？ 如何使用Bootstrap在一行中水平對齊div ReactJS：我如何對齊表單<Field>的<input>並且<button>和</button><h1><button>在一排里面</button><div> <button>?</button> HTML將div對齊到一行 如何將div與不同的高度對齊？ 如何對齊動態生成的div Css技巧 - 如何對齊4個div 如何水平對齊`<div> 並排？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM