Comment faire flotter le texte à droite d'un canevas?

J'ai essayé de faire apparaître une boîte de texte (de taille fixe) directement à droite d'une image (le flot droit la fait aller trop loin vers la droite), mais n'a pas eu beaucoup de succès. À partir de maintenant, la zone de texte continue d'apparaître directement au-dessus de la toile.Comment faire flotter le texte à droite d'un canevas?

HTML:

<body> 
    <div class="wrapper"> 
     <div class="labelMaker"><label>Labs:</label></div> 
     <canvas id="can" width="680" height="485"></canvas> 
    </div> 
</body>

CSS:

.labelMaker { 
    border:solid; 
    width:150px; 
    height:100; 
} 

.wrapper canvas { 
    margin-right:15px; 
    float:left; 
}

Toutes les suggestions pour résoudre ce problème? En outre, je pensais mettre un en-tête au-dessus du canevas et du textbox, mais je craignais que cela affecte les coordonnées sur le canevas si j'utilisais un périphérique différent avec des dimensions différentes ou zoomé/déporté le texte enveloppe une nouvelle ligne. Serait-ce réellement un problème ou non?

Source

2017-01-16 li127

<style type="text/css"> 
    .labelMaker{ 
     border:solid; 
     width:150px; 
     height:100; 
     right: 170px; 
     display: inline-block; 
     float: right; 
     position: relative; 
    } 

    .wrapper canvas { 
     margin-right:180px; 
     float:left; 
    } 

</style>

Source

2017-01-16 22:24:18

Vous pouvez utiliser display: flex; sur le parent, puis order: -1; sur le canevas pour en faire le premier élément du conteneur. A la place, la bordure/largeur/hauteur de .labelMaker a été remplacée par .labelMaker label et a été affectée display: block; afin de créer une mise en page mieux qu'un élément en ligne.

canvas { 
 
    background: #ccc; 
 
} 
 

 
.labelMaker label { 
 
    border: solid; 
 
    display: block; 
 
    width: 150px; 
 
    height: 100; 
 
} 
 

 
.wrapper canvas { 
 
    margin-right: 15px; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
} 
 

 
canvas { 
 
    order: -1; 
 
}

<div class="wrapper"> 
 
    <div class="labelMaker"><label>Labs:</label></div> 
 
    <canvas id="can" width="680" height="485"></canvas> 
 
</div>

Source

2017-01-16 22:15:54

<body> 
<div id="left" style="float:left; margin-right: 5px;"> 
    <canvas id="can" width="680" height="485"></canvas> 
</div> 
<div id="left" style="float:left;"> 
    <div class="labelMaker"><label>Labs:</label></div> 
</div> 
<div style="clear:both;"></div> 
</body>

Source

2017-01-16 22:16:33 SergioAMG

Cela rend l'étiquette aller trop loin vers la droite si. Comment faites-vous pour que le texte ressemble à 5 pixels à droite de l'endroit où la toile s'arrête? – li127

Je viens d'éditer la réponse, maintenant il fait ce dont vous avez besoin – SergioAMG

Pour une raison quelconque, il fait flotter la zone de texte sur le tiers droit du canevas. Cependant, j'ai eu une solution de quelqu'un d'autre alors merci quand même! – li127

Comment faire flotter le texte à droite d'un canevas?

Répondre

Questions connexes