html bouton radio allignment avec div

J'ai deux boutons radio et deux cartes. Je veux montrer chaque bouton radio sous chaque carte. Et les cartes doivent être affichées côte à côte. J'ai essayé mais pas de succès. Les boutons radio apparaissent sur une position indépendante. Pourrais-tu m'aider s'il te plaît ?html bouton radio allignment avec div

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="inital-scale=1.0 , user-scalable=no" /> 
    <script src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script> 

      <script > 
      function initialize() { 

       var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037); 

       var mapOptions = { 
        zoom: 10, 
        center: fenway, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 

       }; 

       var map= new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
       var map2= new google.maps.Map(document.getElementById("map_canvas2"),mapOptions); 

      } 
     </script> 
    </head> 

    <body onload="initialize()"> 


     <form > 

     <div class="left-div" id="map_canvas" style="width: 500px; height: 500px;"></div> 
     <input type="radio" name="A" id="choice1" value="c1" >A: 
     <label for="choice1" > 
     </label><br> 

    <label for="choice2" > 
      <input type="radio" name="B" id="choice2" value="c2" >B: 
      <div class="right-div" id="map_canvas2" style="width: 500px; height: 500px;"></div> 

     </label><br> 

    </form>

C'est le css

.left-div { 
    float: left; 
    margin-right: 8px; 

} 
.right-div { 
    margin-left: 508px; 

}

Source

2012-11-19 John Smith

Êtes-vous en mesure de créer un violon? –

Je suppose que cela va servir. J'ai utilisé 4 divs et les ai flottés à gauche avec une largeur fixe. (DEMO)

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="inital-scale=1.0 , user-scalable=no" /> 
<script src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script> 

     <script > 
     function initialize() { 

      var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037); 

      var mapOptions = { 
       zoom: 10, 
       center: fenway, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 

      }; 

      var map= new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
      var map2= new google.maps.Map(document.getElementById("map_canvas2"),mapOptions); 

     } 
    </script> 
</head> 

<body onload="initialize()"> 


    <form > 

    <div style="width:500px; float:left; height:600px" id="map_canvas"></div> 
    <div style="width:500px; float:left; height:50px">  
    <input type="radio" name="A" id="choice1" value="c1" >A:<label for="choice1"></label><br> 
    </div> 
    <div style="width:500px; height:600px; float:left" id="map_canvas2"></div> 
    <div style="width:500px; float:left; height:50px">   
    <label for="choice2" ><input type="radio" name="B" id="choice2" value="c2" >B:</label> 
    </div> 
</form>

Source

2012-11-19 19:59:37

les cartes doivent être côte à côte. Pourriez-vous m'aider pour ça? –

C'est parti http://jsfiddle.net/ZZUUE/2/ –

je réécrire le code html à peu près tout (vous avez une commande de bizarre là-bas, pas de cohérence entre les 2 cartes)

Qu'est-ce que vous voulez faire est quelque chose comme ceci:

<form> 
    <div class="leftdiv> 
     <div id="map1"></div> 
     <input type="radio">A: 
    </div> 
    <div class="rightdiv"> 
     <div id="map2"></div> 
     <input type="radio">B:<br> 
    </div> 
</form>

Je laisserai les détails et CSS pour vous travailler ... Bonne chance :)

Source

2012-11-19 19:49:40 Richie

html bouton radio allignment avec div

Répondre

Questions connexes