Nessuna barra di scorrimento orizzontale sul float a destra

StackOverflow https://stackoverflow.com/questions/1633971

  •  06-07-2019
  •  | 
  •  

Domanda 

<html>
<head>
<style type="text/css" rel="stylesheet">
    * {margin:0;padding:0;}

    div#box {background-color:green;width:1000px;}

    /* #box {position:absolute;top:0;right:0;} */
    /* #box {position:absolute;top:0;left:0;} */
    /* #box {float:right;} */
    #box {float:left;}

    .clearer {clear:both;}
</style>
</head>
<body>
    <div id="box">
        asdafdsf
    </div>
    <div class="clearer"></div>
</body>
</html>

Scomponi il primo id a sinistra del float con quello a destra del float e vedrai. Ho lasciato anche le mie soluzioni provate commentate.

Dovresti avere una riproduzione completa da una copia e incolla.

È stato utile?

Soluzione

Non credo che ci sia alcun modo per aggirare questo senza usare javascript. Il browser esegue il rendering di una pagina relativa all'angolo in alto a sinistra di quella pagina, quindi qualsiasi cosa posizionata sopra o a sinistra di quel punto 0,0 è effettivamente fuori dallo schermo. Tutto lo straripamento avviene in basso a destra. È allo stesso modo con il contenuto all'interno di qualsiasi elemento di blocco. Quindi se hai un oggetto posizionato rispetto al lato destro della pagina, più largo del 100% di larghezza. La parte a sinistra del punto di origine 0,0 sarà semplicemente fuori schermo.

Mi piacerebbe che qualcuno mi dimostrasse di sbagliarmi.

Ecco una soluzione javascript che funziona: 

<html>
<head>
<style type="text/css" rel="stylesheet">
    * {margin:0;padding:0;}
    div#box {background-color:green;width:1000px;}
    #box {position:absolute;top:0;left:0;}
    .clearer {clear:both;}
</style>
</head>
<body>
    <div id="box">
        asdafdsf
    </div>
    <div class="clearer"></div>
    <script type="text/javascript">
        function layout() {
            if( typeof( window.innerWidth ) == 'number' )
                this.screenWidth = window.innerWidth;   
            else //patch for IE
                this.screenWidth = document.body.clientWidth;
            this.el = document.getElementById('box')
            if (this.el.offsetWidth > this.screenWidth)
                window.scroll(this.el.offsetWidth,0);
            else
                this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px';
        }
        function eventListener(el,action,func) {
            if (el) {
                if (el.addEventListener)
                    el.addEventListener(action, func, false);
                else if (el.attachEvent)
                    el.attachEvent('on' + action, func);
            }
        }
        eventListener(window,'resize',layout);
        layout();        
    </script>
</body>
</html>

Altri suggerimenti

Ho avuto (quello che penso possa essere) un problema simile in cui volevo allineare a destra un elemento di tela che è più largo del div che lo contiene. Il div è di circa 300 px, l'elemento canvas di circa 1000 px.

Usando float: right , la tela era allineata a destra ma le barre di scorrimento sul div scomparivano.

Ho risolto questo problema con jQuery usando scrollLeft () per impostare lo scorrimento iniziale in base alle larghezze div e canvas, simile a: 

$("#div").scrollLeft(canvas.width() - div.width() )
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top