divの次のdiv floatを使用しない

私はお互いに隣に2つのdivが必要です。私はすでにfloatingを試しましたが、うまくいきませんでした。divの次のdiv floatを使用しない

私は基礎を持っているが、ここで

.mijn_producten{ 
 
    border-style: solid; 
 
    border-color: #dddddd; 
 
    margin-left: 60%; 
 
    margin-right: 5%; 
 
    margin-top: 50px; 
 
    background: white; 
 

 
} 
 
.contact_gev{ 
 
    border-style: solid; 
 
    border-color: #dddddd; 
 
    margin-left: 5%; 
 
    margin-right: 50%; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    background: white; 
 
} 
 
.contact_gev h1{ 
 
    margin-left: 5%; 
 
} 
 
.contact_gev p{ 
 
    margin-left: 5%; 
 
    margin-top: 10% 
 
} 
 
.background_content{ 
 
    background: #f9f9f9; 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
    padding-top: 1%; 
 
    padding-bottom: 1%; 
 
}

<html> 
 
    <head> 
 
     <title>Sapphire webshop</title> 
 
     <link rel="stylesheet" href="css/foundation.css" media="all"/> 
 
     <link rel="stylesheet" href="css/csszelf.css" media="all"/> 
 
    </head> 
 
    <body> 
 
     /*<?php include 'header.php';?>*/ 
 
     <div class = "background_content"> 
 
      <div class= "contact_gev"> 
 
       <h1>Contact gegevens</h1> 
 
       <form> 
 
        <p>Gebruikersnaam: <input class="registreren" type="text" name="Gebruikersnaam"></p> 
 
        <p>Voornaam: <input class="registreren" type="text" name="voornaam"></p> 
 
        <p>Achternaam: <input class="registreren" type="text" name="achternaam"></p> 
 
        <p>Telefoonnummer: <input class="registreren" type="text" name="telefoonnummer"></p> 
 
        <p>Geboorte datum: <input class="registreren" type="text" name="geboortedatum"></p> 
 
        <p>Adres:<input class="registreren" type="text" name="adres"></p>  
 
        <p>Postcode:<input class="registreren" type="text" name="postcode"></p> 
 
        <p>plaats:<input class="registreren" type="text" name="plaats"></p> 
 
        <p>land:<input class="registreren" type="text" name="land"></p> 
 
       </form> 
 
      </div> 
 
      <div class ="mijn_producten"> 
 
       <h1> Mijn producten</h1> 
 
      </div> 
 
     </div> 
 
     /* <?php include 'footer.php';?> */ 
 
    </body> 
 
</html>

あなたは、私がすでに使用しているフロートは、右から左私のコードを見ることができますほとんどの時間を自分のCSSを使用し、すべての位置は

出典

2016-05-17 Nick

削除は、両方の要素の上に放置し、次いで例えばあなたはまた、使用することができ、50％ –

が幅を与えます'display：inline-block'とマージンを削除します。または、フレックスボックスを見ることができます。 – kyeiti

@IsmailFarooqありがとうございます:) – Nick

バリアントボット側から左右のマージンを削除し、両方の要素の上に浮動小数点を追加してから、例えば50％の幅を与えます。

HTML

<div class="background_content"> 
    <div class="contact_gev"> 
    <h1>Contact gegevens</h1> 
    <form> 
     <p>Gebruikersnaam: 
     <input class="registreren" type="text" name="Gebruikersnaam"> 
     </p> 
     <p>Voornaam: 
     <input class="registreren" type="text" name="voornaam"> 
     </p> 
     <p>Achternaam: 
     <input class="registreren" type="text" name="achternaam"> 
     </p> 
     <p>Telefoonnummer: 
     <input class="registreren" type="text" name="telefoonnummer"> 
     </p> 
     <p>Geboorte datum: 
     <input class="registreren" type="text" name="geboortedatum"> 
     </p> 
     <p>Adres: 
     <input class="registreren" type="text" name="adres"> 
     </p> 
     <p>Postcode: 
     <input class="registreren" type="text" name="postcode"> 
     </p> 
     <p>plaats: 
     <input class="registreren" type="text" name="plaats"> 
     </p> 
     <p>land: 
     <input class="registreren" type="text" name="land"> 
     </p> 
    </form> 
    </div> 
    <div class="mijn_producten"> 
    <h1> Mijn producten</h1> 
    </div> 
</div>

CSSは

ボット側から左右の余白はフロートを追加

.mijn_producten { 
    border-style: solid; 
    border-color: #dddddd; 
    width: 50%; 
    float: right; 
    margin-top: 50px; 
    background: white; 
    box-sizing: border-box; 
} 

.contact_gev { 
    border-style: solid; 
    border-color: #dddddd; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    background: white; 
    width: 50%; 
    float: left; 
    box-sizing: border-box; 
} 

.contact_gev h1 { 
    margin-left: 5%; 
} 

.contact_gev p { 
    margin-left: 5%; 
    margin-top: 10% 
} 

.background_content { 
    background: #f9f9f9; 
    padding-top: 1%; 
    padding-bottom: 1%; 
    overflow: hidden; 
}

Demo

出典

2016-05-17 11:38:11

divの次のdiv floatを使用しない

答えて

関連する問題