Jak wyrównać 3 divs left-center-right?

Jak mogę wyrównać 3 elementy div w jednym wierszu od lewej do prawej strony bez konieczności definiowania wyraźnych rozmiarów?Jak wyrównać 3 divs left-center-right?

Lewy powinien być wyrównany najbardziej do lewej krawędzi i prawej do prawej krawędzi.

Następujące nie działa:

<div style="float: left;"> 
    left 
</div> 
<div style="float: right;"> 
    right 
</div> 
<div style="margin: 0 auto;"> 
    center 
</div>

Źródło

2013-02-28 membersound

Kiedy to zrobić, zwykle co najmniej 2 z 3 mają rozmiary mogę określić, a ja po prostu trzeci dopasuję do pozostałych dwóch – ppeterka

Nie rozumiem, jaki jest problem z kodem, który napisałeś. działa tak, jak opisałeś: http://jsfiddle.net/tagCs/ –

Dodaj owijkę div i dać text-align:center

CSS

.wrap{ 
     text-align:center 
    }

HTML

<div class="wrap"> 
<div class="left"> 
    left 
</div> 
<div class="right"> 
    right 
</div> 
<div class="center"> 
    center sdv dg sdb sdfbh sdfhfdhh h dfh 
</div> 
    </div>

DEMO

Źródło

2013-02-28 11:39:11 Sowmya

Mam zastosowanie wyrównania tekstu: środek do otoki z 3 obrazami, czy ktoś może wyjaśnić, dlaczego to działa? –

<div style="width:100%;margin:0 auto; padding: 0"> 
    <div style=" float:left;width:32%;border: thin solid black"> 
     left 
    </div> 
    <div style=" float:left;width:32%;border: thin solid black"> 
     center 
    </div> 
    <div style=" float:left;width:32%;border: thin solid black"> 
      right 
    </div> 
</div> 
<div style="clear:both"> 
</div>

Źródło

2013-02-28 11:33:21 zkanoca

Czy próbowałeś tego? To nie działa dla mnie: http://jsfiddle.net/eqAyg/ – membersound

Napisałem przypadkowo float property do głównego div stylu. Powinien być w każdym wewnętrznym div. – zkanoca

Herezje przykład jak to zrobić poprzez umieszczenie pływaków w odpowiedniej kolejności.

jsFiddle Example

<div class="square" style="float: left;">left</div> 
<div class="square" style="float: right;">right</div> 
<div class="square" style="margin:0 auto !important;">center</div> 


.square { 
width:50px; 
height:50px; 
background-color:#ff0000; 
text-align:center; 
border: 1px solid #000; 
}

Źródło

2013-02-28 11:38:10 chriz

Spróbuj

CSS

div{width:33%;}

HTML

<div style="float: left;border:1px solid red;"> 
    left 
</div> 
<div style="float: right;border:1px solid green;"> 
    right 
</div> 
<div style="margin: 0 auto;border:1px solid blue;"> 
    center 
</div>

Źródło

2013-02-28 11:41:16

Nie da się tego zrobić, nie wiedząc o zawartości i układzie układu. Ale dla punktu giełdę, można spróbować to:

HTML:

<div class="clearfix holder"> 
    <div class="column left"> 
     Some Contents Here... 
    </div> 
    <div class="column middle"> 
     Some Contents Here... 
    </div> 
    <div class="column right"> 
     Some Contents Here... 
    </div> 
</div>

CSS:

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
} 
.holder{ 
    text-align:center; 
} 
.column{ 
    display:inline-block; 
    *display:inline; 
    *zoom:1; 
    width:auto; 
} 
.left{ 
    background-color:#ff0; 
    float:left; 
} 
.middle{ 
    background-color:#f0f; 
    margin:0 auto; 
} 
.right{ 
    background-color:#0ff; 
    float:right; 
}

DEMO

Źródło

2013-02-28 11:45:12

Jak wyrównać 3 divs left-center-right?

Odpowiedz

Powiązane problemy