2017-06-21 6 views
-2

私はショッピングカタログを作成しようとしました。私は現時点で2つのアイテムを作っており、それらを横に並べて上から下に移動しないようにしたい。私は何を意味するのかを示す写真を持っています。 https://gyazo.com/c429b34c9e5fdd61ce0922d0eeaabc66 お手伝いができますように!買い物カタログはどうやって作れますか?

<style> 
 
.Button { 
 
    background-color: Plum; 
 
    border: 1px solid; 
 
border-color: black; 
 
    color: white; 
 
    padding: 10px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
font-family: hacked; 
 
border-radius: 8px; 
 
text-shadow: 2px 2px grey; 
 
    
 
} 
 

 
    .sub { 
 
    position: relative; 
 
} 
 
.itmHolder { 
 
    position: relative; 
 
} 
 

 
    
 
    
 
    .itmHolder:nth-child(2), 
 
.itmHolder:nth-child(3) { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.og { 
 
    margin-top: 50px; 
 
    position: center; 
 
    text-align: center; 
 
} 
 
h1 { 
 
    font-size: 100%; 
 
color: Plum; 
 
text-shadow: 3px 3px Black; 
 
} 
 
body { 
 
    background-image: url("lightning.gif"); 
 
    background-repeat: no-repeat; 
 
    -webkit-transform: rotateX(0); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    min-height: 100vh; 
 
} 
 
p { 
 
    font-size: 150%; 
 
    color: Plum; 
 
    text-shadow: 2px 2px Black; 
 
} 
 
h2 { 
 
    color: DarkGreen; 
 
    text-shadow: 2px 2px Black; 
 
} 
 

 
a:link, a:visited { 
 
    color: black; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 
</style>
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<font size=10><center><h1 style="font-family:blowbrush;text-align: center;">Buy now</h1> 
 
<body background="background.jpg"> 
 
<title>Our Future</title> 
 
    <div class="og"> 
 
    <div class="itmHolder"> 
 

 
    <div class="sub"> 
 
     <button type="button" class="Button"><a href="selve_websiten.html">Frontpage</a></button> 
 
\t <button type="button" class="Button"><a href="side2.html">About us</a></button> 
 
    </div> 
 
<br></br> 
 
<br></br> 
 
    
 
    
 
    
 
    
 
<p style="font-family:kenyan coffee;text-align: center; font-size: 30px;">No Turning Back - Steam Code</p><h2 style="font-size: 34px;font-family:kenyan coffee;text-align: center;">0,99€</h2> 
 

 
<div style="text-align: center;"> 
 
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
 

 
    <!-- Identify your business so that you can collect the payments. --> 
 
    <input type="hidden" name="business" value="[email protected]"> 
 

 
    <!-- Specify a Buy Now button. --> 
 
    <input type="hidden" name="cmd" value="_xclick"> 
 

 
    <!-- Specify details about the item that buyers will purchase. --> 
 
    <input type="hidden" name="item_name" value="No Turning Back - Steam Code"> 
 
    <input type="hidden" name="amount" value="0.99"> 
 
    <input type="hidden" name="currency_code" value="EUR"> 
 

 
    <!-- Display the payment button. --> 
 
    <input type="image" name="submit" border="0" 
 
    src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_buynow_107x26.png" 
 
    alt="Buy Now"> 
 
    <img alt="" border="0" width="1" height="1" 
 
    src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" > 
 

 
</form> 
 
</div> 
 

 
<br></br> 
 

 
<p style="font-family:kenyan coffee;text-align: center; font-size: 30px;">Tap Adventure: Time Travel Three Rings DLC - Steam Code</p><h2 style="font-size: 34px;font-family:kenyan coffee;text-align: center;">0,99€</h2> 
 

 
<div style="text-align: center;"> 
 
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
 

 
    <!-- Identify your business so that you can collect the payments. --> 
 
    <input type="hidden" name="business" value="[email protected]"> 
 

 
    <!-- Specify a Buy Now button. --> 
 
    <input type="hidden" name="cmd" value="_xclick"> 
 

 
    <!-- Specify details about the item that buyers will purchase. --> 
 
    <input type="hidden" name="item_name" value="No Turning Back - Steam Code"> 
 
    <input type="hidden" name="amount" value="0.99"> 
 
    <input type="hidden" name="currency_code" value="EUR"> 
 

 
    <!-- Display the payment button. --> 
 
    <input type="image" name="submit" border="0" 
 
    src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_buynow_107x26.png" 
 
    alt="Buy Now"> 
 
    <img alt="" border="0" width="1" height="1" 
 
    src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" > 
 

 
</form> 
 
</div> 
 
    
 
    
 
    
 
    
 

 
</form></center> 
 
</body> 
 
</html>

答えて

0
<html><head> 
</head> 
<body background="background.jpg"><font size="10"><center><h1 style="font-family:blowbrush;text-align: center;">Buy now</h1> 

<title>Our Future</title> 
    <div class="og"> 
    <div class="itmHolder"> 

    <div class="sub"> 
     <button type="button" class="Button"><a href="selve_websiten.html">Frontpage</a></button> 
     <button type="button" class="Button"><a href="side2.html">About us</a></button> 
    </div> 
<br><br> 
<br><br> 



<div class="itemsHolder" style="display: inline-flex; flex-wrap: wrap"> 
    <div class="item"> 
<p style="font-family:kenyan coffee;text-align: center; font-size: 30px;">No Turning Back - Steam Code</p><h2 style="font-size: 34px;font-family:kenyan coffee;text-align: center;">0,99€</h2> 

<div style="text-align: center;"> 
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 

    <!-- Identify your business so that you can collect the payments. --> 
    <input name="business" value="[email protected]" type="hidden"> 

    <!-- Specify a Buy Now button. --> 
    <input name="cmd" value="_xclick" type="hidden"> 

    <!-- Specify details about the item that buyers will purchase. --> 
    <input name="item_name" value="No Turning Back - Steam Code" type="hidden"> 
    <input name="amount" value="0.99" type="hidden"> 
    <input name="currency_code" value="EUR" type="hidden"> 

    <!-- Display the payment button. --> 
    <input name="submit" src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_buynow_107x26.png" alt="Buy Now" border="0" type="image"> 
    <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" height="1" border="0" width="1"> 

</form> 
</div> 
    </div> 

<br><br> 
<div class="item"> 
<p style="font-family:kenyan coffee;text-align: center; font-size: 30px;">Tap Adventure: Time Travel Three Rings DLC - Steam Code</p><h2 style="font-size: 34px;font-family:kenyan coffee;text-align: center;">0,99€</h2> 

<div style="text-align: center;"> 
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 

    <!-- Identify your business so that you can collect the payments. --> 
    <input name="business" value="[email protected]" type="hidden"> 

    <!-- Specify a Buy Now button. --> 
    <input name="cmd" value="_xclick" type="hidden"> 

    <!-- Specify details about the item that buyers will purchase. --> 
    <input name="item_name" value="No Turning Back - Steam Code" type="hidden"> 
    <input name="amount" value="0.99" type="hidden"> 
    <input name="currency_code" value="EUR" type="hidden"> 

    <!-- Display the payment button. --> 
    <input name="submit" src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_buynow_107x26.png" alt="Buy Now" border="0" type="image"> 
    <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" height="1" border="0" width="1"> 

</form> 
</div> 
    </div> 


    </div> 

</div></div></center> 



</font></body></html> 

IクラスitemsHolderで1つのDIVを持つアイテムを貪食し、各項目はクラスitemとDIVです。

itemHolderには、並べて表示するためのdisplay: inline-flexと、並べ替えのグリッドに配置するflex-wrap: wrapがあります。

アイテム間にさらにスペースが必要な場合は、クラスItemを使用し、パディングまたは余白を追加します。

あなたのアイテムになりましたので

を「パディングを追加する方法」のUPDATEがクラス下にありますが、CSSでそのクラスを選択し、単にそれにパディングを追加することができます。

.item{ 
    padding: 20px; 
} 

これが行います各辺(左、右、上、下)から20pxのクラス項目の要素の内側にパディング。

+0

ありがとうございます。マージンやパディングを正しく追加するにはどうすればよいですか。すみません、これはかなり新しいです。 – EmalGodZ

+0

@EmalGodZ更新された答えを確認してください:)それがあなたを助けたなら、それを答えとしてチェックすることを忘れないでください。 – user5014677

+0

もう一度こんにちは、私はあなたが私に話をしてパディングを作ったが、何も変わっていないのですか? – EmalGodZ

関連する問題