Domanda

Mi aspettavo che i due tag span nell'esempio seguente venissero visualizzati uno accanto all'altro, invece vengono visualizzati uno sotto l'altro.Se imposto la larghezza della classe span.right al 49%, verranno visualizzati uno accanto all'altro.Non riesco a capire perché l'intervallo destro viene spinto verso il basso come se avesse un margine/imbottitura invisibile che richiede più del 50%.Sto cercando di farlo senza utilizzare tabelle html.Qualche idea?

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            margin: 0;
        }

        html,body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            border:none;
        }

        div.header{
            width:100%;
            height:80px;
            vertical-align:top;
        }

        span.left {
            height:80px;
            width:50%;
            display:inline-block;
            background-color:pink;
        }

        span.right {
            vertical-align:top; 
            display:inline-block;
            text-align:right;
            height:80px;
            width:50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='header'>
        <span class='left'>Left Span 50% width</span>
        <span class='right'>Right Span 50% width</span>
    </div>
</body>
</html>

Grazie per la spiegazione.Il float:left funziona magnificamente con i risultati attesi in FF 3.1.Sfortunatamente, in IE6 l'intervallo del lato destro viene visualizzato al 50% del 50%, dandogli in effetti una larghezza pari al 25% della finestra del browser.Impostandone la larghezza al 100% si ottengono i risultati desiderati ma si interrompe FF 3.1 che è in modalità di conformità agli standard e lo capisco.Farlo funzionare sia in FF che in IE 6, senza ricorrere ad hack o utilizzare più fogli CSS è stata una sfida

È stato utile?

Soluzione 

float: left;

Prova ad aggiungerlo a span.left

Lo farà fluttuare a sinistra (come suggerito dalla sintassi).

Non sono assolutamente un esperto di CSS, quindi per favore non prenderlo come un fatto indiscutibile, ma trovo che quando qualcosa viene flottato, non fa differenza per la posizione verticale delle cose sotto di esso.

Se sposti span.right a destra e poi aggiungi del testo sotto di essi dovresti ottenere dei risultati interessanti, per interrompere questi "risultati interessanti" puoi usare "clear:left/right/both" che farà sì che il blocco con lo stile chiaro si trovi sotto qualsiasi cosa spostata a sinistra/destra/entrambi. W3Schools avere una pagina anche su questa proprietà.

E benvenuto in StackOverflow.

Altri suggerimenti

Questo perché inline e inline-block includono spazi bianchi (nel tuo caso l'interruzione di riga) tra gli elementi.Nel tuo caso la larghezza combinata degli elementi è 50%+50%+spazi bianchi > 100%.

Dovresti inserire i due elementi sulla stessa riga nel tuo documento HTML (senza spazio)

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

Oppure usa i commenti HTML

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

Io stesso preferisco quest'ultimo.

Non mi piace questo hack ma sembra funzionare sia in Firefox che in IE6:

span.right {
  vertical-align:top; 
  display:inline-block;
  text-align:right;
  height:80px;
  width:50%;
  *width:100%;
  background-color:red;
}

Notare la *width: 100% che sembra soddisfare i requisiti di IE6 e viene ignorato da Firefox.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top