1. casa
  2. Domanda e risposta
  3. Come posizionare due elementi affiancati utilizzando i CSS

Come posizionare due elementi affiancati utilizzando i CSS

2013-09-30 12 views

risposta

28

Basta usare lo stile float.Metti la tua mappa google iframe in una classe div e il paragrafo in un'altra classe div, quindi applica i seguenti stili CSS a quelle div (non dimenticare di cancellare i blocchi dopo l'effetto float, per non creare problemi ai blocchi sotto di loro) :

css

.google_map{ 
    width:55%; 
    margin-right:2%; 
    float: left; 
} 
.google_map iframe{ 
    width:100%; 
} 
.paragraph { 
    width:42%; 
    float: left; 
} 
.clearfix{ 
    clear:both 
}

html

<div class="google_map"> 
     <iframe></iframe> 
</div> 
<div class="paragraph"> 
     <p></p> 
</div> 
<div class="clearfix"></div>

fonte

2013-09-30 08:47:42

1

È possibile utilizzare float:left per allineare div in una sola riga.

Fiddle

fonte

2013-09-30 08:46:06 Roopendra

1

È possibile float gli elementi (la mappa involucro, e il paragrafo), o utilizzare inline-block su entrambi.

fonte

2013-09-30 08:46:58 avrahamcool

1

Mettere il iframe all'interno del <p> e fare il iframe css

float:left; display:inline-block

fonte

2013-09-30 08:47:51

0

dare le caselle di classe foo (o qualsiasi altra cosa) e aggiungere il css

.foo{ 
    float: left; 
}

fonte

2013-09-30 08:48:07

+1

'display: inline-block' non ha effetto se stai già navigando. – avrahamcool

+0

@avrahamcool true, ima edit. –

5

Per la vostra iframe dare una esterna div con styledisplay:inline-block, E per il vostro punto div anche dare display:inline-block

HT ML

<div class="side"> 
    <iframe></iframe> 
</div> 
<div class="side"> 
    <p></p> 
</div>

CSS

.side { 
    display:inline-block; 
}

fonte

2013-09-30 08:48:41

2

Ti piace questa

**

demo

**

css

.block { 
    display: inline-block; 
    vertical-align:top; 
}

fonte

2013-09-30 08:51:58 falguni

2

Utilizzare uno galleggiante o inline elementi:

Esempio JSBIN

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <div>float example</div> 
    <div><div style="float:left">Floating left content</div><div>Some content</div></div> 
    <div>inline block example</div> 
    <div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div> 
</body> 
</html>

fonte

2013-09-30 08:52:26 guymid

29

Hai due opzioni, o float:left o display:inline-block.

Entrambi i metodi hanno i loro avvertimenti. Sembra che display:inline-block sia più comune al giorno d'oggi, in quanto evita alcuni dei problemi di floating.

leggere questo articolo http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ o questa http://www.vanseodesign.com/css/inline-blocks/ per una più in dettaglio discussione.

fonte

2013-09-30 08:54:33

+1

display: blocco in linea; ha funzionato per me per me – dmeehan

+0

"display: inline-block" è quello giusto. "float: left" potrebbe causare alcuni problemi durante il posizionamento degli articoli. – ivanleoncz

1

Avvolgere l'iframe in una classe, mobile a sinistra.

Il paragrafo deve quindi essere forzato verso l'alto e verso destra finché c'è spazio per esso. Quindi imposta il tuo paragrafo da visualizzare: blocco in linea e aggiungi un margine sinistro per riordinarlo.

<div class="left"> 
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe--> 
</div> 
<p>Lorem Paragraph Text</p> 


.left { float: left; } 
p { display: inline-block; margin-left: 30px; }

Ecco un violino: http://jsfiddle.net/4DACH/

fonte

2013-09-30 08:56:25 jaybong

6

Nessuna di queste soluzioni sembra funzionare se si aumenta la quantità di testo in modo che sia maggiore della larghezza del contenitore principale, l'elemento a destra viene comunque mosso sotto quello a sinistra invece di restarvi accanto. Per risolvere questo problema, è possibile applicare questo stile all'elemento sinistra:

position: absolute; 
width: 50px;

e applicare questo stile all'elemento destra:

margin-left: 50px;

Basta fare in modo che il margine sinistro per l'elemento giusto è maggiore o uguale alla larghezza dell'elemento sinistro. Non sono necessari attributi fluttuanti o altri. Vorrei suggerire avvolgendo questi elementi in un div con lo stile:

display: inline-block;

L'applicazione di questo stile potrebbe non essere necessario a seconda di elementi circostanti

Fiddle: http://jsfiddle.net/2b0bqqse/

È possibile visualizzare il testo alla right è più alto dell'elemento a sinistra delineato in nero. Se si rimuove il posizionamento assoluto e il margine e utilizzare invece galleggiante come altri hanno suggerito, il testo a destra scenderà sotto l'elemento a sinistra

Fiddle: http://jsfiddle.net/qrx78u20/

fonte

2014-12-18 19:47:42

+0

Hai inserito la risposta corretta. Non capisco perché non sia ottimizzato il upvot – Patlatus

+0

Il testo si sposterà di seguito solo se la larghezza totale (elemento mobile sul lato sinistro + lato destro + paddings + margini + bordi) supera il 100% della larghezza dello schermo. –

Problemi correlati

 Problemi correlati