He configurado un margin: 0 33% 0 0;, pero también me gustaría asegurarme de que el margen sea al menos un determinado importe px. Sé que no hay min-margin en CSS, así que me preguntaba si tengo alguna opción aquí.¿Utiliza un margen de porcentaje en CSS pero quiere un margen mínimo en píxeles?
Coloque un div con un% width y un estático min-width a la derecha de su elemento.
<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">
Este enfoque evita el uso de otros elementos flotantes y 'clear' dentro de los divs parentales, ya que esto provocará que el diseño se coloque en posiciones no deseadas. Una solución para esto es establecer 'overflow: hidden' en los padres div anteriores, pero eso realmente no es un escenario deseable y restringirá el uso de elementos como información sobre herramientas HTML, ya que estos podrían ser cortados por el cuadro delimitador de la no -Divs desbordantes. – Kafoso
¿Quería usar 'float: right' para el segundo' div'? –
¿Qué le parece esto?
body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
Bueno, si está utilizando un cuerpo de 100% de ancho, será un problema ya que habrá un desbordamiento en el eje x. Ahora puede hacer un "oveflow-x: hidden", sin embargo, esto causará un aumento en la cosecha del div correcto al redimensionar. ¡Difícil! –
@CarlPapworth ... o use 'tamaño de caja: border-box;' :) – Brett
puede probar esta
.mm:before {
content: "";
display: inline-block;
width: 33%;
min-width: 200px;
}
Carl Papworth, en este caso, puede utilizar esto:
body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
La verdadera solución es utilizar una consulta de medios punto de ruptura para determinar cuándo el 33% ya no le funciona y debe anularse con el margen mínimo en píxeles.
/*Margin by percentage:*/
div{
margin: 0 33% 0 0;
}
/*Margin by pixel:*/
@media screen and (max-width: 200px){
div{
margin: 0 15px 0 0;
}
}
En el código anterior, cambie el max-width a todo lo ancho de la pantalla del margen derecho del 33% ya no funciona para usted.
si está utilizando span que u tiene que hacer como esto:
span{
display:block;
margin:auto;
}
si está utilizando div que u puede hacer esto:
div{
margin:auto;
}
tengo jugado con algunas de las soluciones antes mencionadas, pero en un entorno fluido y realmente receptivo, creo que la mejor opción es establecer el paddi adecuado ng en el respectivo contenedor/envoltorio. Ejemplo: Estilo:
html {
background-color: #fff;
padding: 0 4em;
}
body {
margin: 0 auto;
max-width: 42em;
background-color: #ddf;
}
Ahora jugar con diferentes anchuras de las ventanas, y también tratar diversos tamaños de fuente.
También pruebe el working demo.
quizás utilizando un div vacío a la derecha del que está configurando un margen para? y ancho de configuración: 33%; min-width: npx; para ese segundo div? Ambos elementos se incluyeron en un contenedor div y flotaron ... Sin embargo, no estoy seguro si eso funcionará ... solo una idea. –
Gracias por la idea AR. – Brett