Comment la position de deux éléments côte à côte à l'aide de CSS

Je veux pour la position d'un point à la droite d'un <iframe> de Google map.

Je ne sais pas comment montrer mon code, voici donc une capture d'écran de ce que je veux:

poste à jsfiddle.net
poster votre code, puis mettez-le en surbrillance et appuyez sur "ctrl + k"

InformationsquelleAutor Jake Jääskeläinen Hazelwood | 2013-09-30

Suffit d'utiliser le style float. Mettre votre carte google iframe dans une div de classe, et le paragraphe dans un autre div class, puis d'appliquer la suivante styles CSS à ceux div classes(n'oubliez pas de vider les blocs après float effet, pour ne pas faire les blocs de la difficulté au-dessous d'eux):

css

.google_map{
    width:55%;
    margin-right:2%;
    float: left;
}
.google_map iframe{
   width:100%;
}
.paragraph {
    width:42%;
    float: left;
}
.clearfix{
    clear:both
}

html

<div class="google_map">
      <iframe></iframe>
</div>
<div class="paragraph">
      <p></p>
</div>
<div class="clearfix"></div>

InformationsquelleAutor Anna Gabrielyan

35

Vous avez deux options, soit float:left ou display:inline-block.

Les deux méthodes ont leurs mises en garde. Il semble que display:inline-block est plus fréquent de nos jours, car elle permet d'éviter certains des problèmes de flottement.

Lire cet article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ ou cette un http://www.vanseodesign.com/css/inline-blocks/ pour un plus dans le détail de la discussion.
- display:inline-block; travaillé un régal pour moi
- "display: inline-block" est la bonne. "float: left" pourrait conduire à des problèmes lorsque les éléments de positionnement..
InformationsquelleAutor PA.
11

Aucune de ces solutions ne semble pas fonctionner si vous augmentez le montant de texte de sorte qu'il est plus grand que la largeur du conteneur parent, l'élément vers la droite encore se déplace en dessous de celui de la gauche, au lieu de rester à côté d'elle. Pour résoudre ce problème, vous pouvez appliquer ce style à la gauche de l'élément:
```
position: absolute;
width: 50px;
```
Et d'appliquer ce style à la droite de l'élément:
```
margin-left: 50px;
```
Assurez-vous que la marge de gauche pour le droit de l'élément est égale ou supérieure à la largeur de la gauche de l'élément. Pas flottante ou d'autres attributs sont nécessaires. Je suggère de mettre ces éléments dans un div avec le style:
```
display: inline-block;
```
L'application de ce style peut ne pas être nécessaire en fonction des éléments environnants

Violon:
http://jsfiddle.net/2b0bqqse/

Vous pouvez voir le texte à droite est plus haute que l'élément vers la gauche, soulignées de noir. Si vous supprimez le positionnement absolu et de la marge et au lieu d'utiliser float comme d'autres l'ont suggéré, le texte à droite se déroulant en dessous de l'élément à gauche

Violon:
http://jsfiddle.net/qrx78u20/
- Vous avez posté la bonne réponse. Je ne comprends pas pourquoi il n'est pas très upvoted
- Texte passage ci-dessous uniquement si la largeur totale (élément flottant sur le côté gauche + droite + paddings + marge + bordures) de la croix-100% de la largeur de l'écran.
InformationsquelleAutor Joe Sager
5

Pour votre iframe donner un extérieur div avec style display:inline-block, Et pour votre paragraphe div aussi donner display:inline-block

HTML
```
<div class="side">
    <iframe></iframe>
</div>
<div class="side">
    <p></p>
</div>
```
CSS
```
.side {
   display:inline-block;
}
```
InformationsquelleAutor Ajith S

Utiliser à flotteur ou des éléments inline:

Exemple JSBIN

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div>float example</div>
  <div><div style="float:left">Floating left content</div><div>Some content</div></div>
  <div>inline block example</div>
  <div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>

InformationsquelleAutor guymid

Comme ce

démo

css

.block {
    display: inline-block;
    vertical-align:top;
}

InformationsquelleAutor Falguni Panchal

2

vous pouvez simplement utiliser certains div de faire un conteneur et le display: flex; pour rendre le contenu s'affichent côte à côte comme ceci:

CSS
```
.splitscreen {
    display:flex;
}
.splitscreen .left {
    flex: 1;
}
.splitscreen .right {
    flex: 1;
}
```
HTML
```
<div class="splitscreen">
    <div class="left">
        
    </div>

    <div class="right">
        
    </div>
</div>
```
à l'aide de flex vous dire qui va l'utiliser plus d'espace sur l'écran.
- La honte, j'ai eu à faire défiler loin vers le bas pour trouver un flex réponse. Je suppose que c'est une vieille question, mais ce devrait être la réponse de ces jours! Ne plus tourner en rond avec float et inline-block bizarreries!
InformationsquelleAutor Lpgoulart
1

Vous pouvez utiliser float:left pour aligner div dans une ligne.

Violon

InformationsquelleAutor Roopendra
1

Vous pouvez float les éléments (la carte wrapper, et le paragraphe),
ou utiliser inline-block sur les deux.

InformationsquelleAutor avrahamcool
1

Mettre le iframe à l'intérieur de la <p> et de faire de la iframe css

float:left; display:inline-block

InformationsquelleAutor Sobin Augustine
1

Envelopper l'iframe dans une classe, un flotteur qui gauche.

Le paragraphe avec ensuite être forcé vers le haut et vers la droite tant qu'il y a de la place pour ça.
Ensuite, réglez votre point de display:inline-block, et ajouter un peu de marge de gauche de la ranger.
```
<div class="left">
<img src="http://lorempixel.com/300/300" /> 
</div>
<p>Lorem Paragraph Text</p>


.left { float: left; }
p { display: inline-block; margin-left: 30px;  }
```
Ici un violon: http://jsfiddle.net/4DACH/

InformationsquelleAutor jaybong
0

donner à vos boîtes de la classe foo (ou autre) et ajouter le css
```
.foo{
    float: left;
}
```
- display:inline-block n'a aucun effet si vous êtes déjà flottante.
- vrai, ima modifier.
InformationsquelleAutor Math chiller

Vous devez vous connecter pour publier un commentaire.