0
192
ViewsCSS puso dos divs uno al lado del otro
Estoy usando vue.js y probé usando float: left; pero no funcionará. Soy nuevo en vue.js pero debería funcionar usando css normal debajo del estilo a la derecha.
Mi código:
<template> <div class = "bar"> <h1 class = "subtitle">Mean {{ field || 'No field yet' }}</h1> <div class = "meandata"> <p>{{ mean.data }}</p> </div> </div> </template> <style> .bar { width: 400px; height: 70px; margin: 20px; padding: 10px; border: 5px; font-size: 18px; background: #FEFAE0 0% 0% no-repeat padding-box; border-radius: 25px; opacity: 1; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .subtitle{ font: normal normal normal 20px/20px Sitka Subheading; letter-spacing: 0px; color: #D4A373; opacity: 1; float: left; margin-left: 20px; margin-top: 35px; margin-right: auto; } .meandata{ float: left; text-align: right; margin-left: auto; margin-right: 20px; font: normal normal normal 70px/50px Sylfaen; letter-spacing: 0px; color: #987554; text-transform: uppercase; opacity: 1; } </style> Salida que obtuve: 
Salida que quiero: 
·
Juan Pablo Isaza
3 answers
Answer question0
¿Puede esto ayudarte?
.bar { /*Add*/ display:flex; justify-content: start; align-items: center; /*End Add*/ width: 400px; height: 70px; margin: 20px; padding: 10px; border: 5px; font-size: 18px; background: #FEFAE0 0% 0% no-repeat padding-box; border-radius: 25px; opacity: 1; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .subtitle{ font: normal normal normal 20px/20px Sitka Subheading; letter-spacing: 0px; color: #D4A373; opacity: 1; float: left; margin-left: 20px; margin-top: 35px; margin-right: auto; } .meandata{ float: left; text-align: right; margin-left: auto; margin-right: 20px; font: normal normal normal 70px/50px Sylfaen; letter-spacing: 0px; color: #987554; text-transform: uppercase; opacity: 1; } <div class = "bar"> <h1 class = "subtitle">Mean Humidity</h1> <div class = "meandata"> <p>35%</p> </div> </div> <div class = "bar"> <h1 class = "subtitle">Mean Temperature</h1> <div class = "meandata"> <p>35*</p> </div> </div>
·
Juan Pablo Isaza
Report
0
Es posible que desee poner display:flex en su primer div. Esto pondrá los dos elementos secundarios uno al lado del otro.
Opcionalmente, también puede poner justify-content: space-evenly en el primer div para espaciar uniformemente los elementos dentro del div.
·
Juan Pablo Isaza
Report
0
<div class="meandata"> << add <h1 class = "subtitle">Mean {{ field || 'No field yet' }}</h1> </div> <div class="meandata"> <p>{{ mean.data }}</p> </div> .meandata{ .... overflow:hidden; << add }
·
Juan Pablo Isaza
Report
Answer question