Asisto a tener 2 cuadros de entrada uno al lado del otro con texto entre ellos. Algo como esto
[0... ] < Ranking < [1000...]Sin embargo, lo máximo que he podido obtener son los dos cuadros de entrada sin texto en el medio. Este es mi código hasta ahora atendiendo a poner el texto entre ellos.
return( <div className="two-col"> <div className="col1"> <input type={"text"} required={true} placeholder={"0..."} name={"id"} onChange={update} /> </div> <text> < Ranking < </text> <div className="col2"> <input type={"text"} required={true} placeholder={"1000..."} name={"id"} onChange={update} /> </div> </div> );Y mi archivo CSS
.two-col { overflow: hidden;/* Makes this div contain its floats */ } .two-col .col1, .two-col .col2 { width: 50%; background: #f2f2f2; } .two-col .col1 { float: left; } .two-col .col2 { float: right; }Cualquier ayuda es muy apreciada.
<div className={'container'}> <div className={'col'}> <input type={'text'} required={true} placeholder={'0...'} name={'id'} onChange={update} /> </div> <div className={'col'}> < Ranking < </div> <div className={'col'}> <input type={'text'} required={true} placeholder={'...1000'} name={'id'} onChangeonChange={update} /> </div> </div> .container { display: flex; flex-flow: row wrap; justify-content: space-between; } Puede tener más control sobre la fila usando display: grid (no tan bien soportado como flexbox).
<div className={"container"}> <div className={"container inputs"}> <div> <input type={"text"} required={true} placeholder={"0..."} name={"id"} onChange={"update"} /> </div> <div> < Ranking < </div> <div> <input type={"text"} required={true} placeholder={"...1000"} name={"id"} onChange={"update"} /> </div> </div> <div className={"graphview"}> graph view </div> </div>CSS
.container { display: flex; flex-flow: row wrap; justify-content: space-between; } .container.inputs { width: 50%; } .graphview { width: calc(50% - 10px); border: 5px solid rgba(0, 0, 0, 1); }Al usar porcentajes y bordes, debe calcular el ancho.
Trate de usar flexbox
.two-col { display: flex; } .two-col .col1, .two-col .col2 { background: #f2f2f2; }y eliminar otros css