Как выровнять 3 divs влево-вправо-вправо?

Как я могу выровнять 3 divs в одной строке влево-вправо -право без необходимости определять явные размеры?Как выровнять 3 divs влево-вправо-вправо?

Слева должна быть выровнена ближе всего к левому краю, а справа - к краю.

Следующая не работает:

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

источник

2013-02-28 membersound

Когда я делаю это, как правило, по крайней мере 2 из 3 имеют размеры, которые я могу указать, и я просто третий подстрою к двум другим – ppeterka

Я не понимаю, в чем проблема с кодом, который вы написали. он делает только то, что вы описали: http://jsfiddle.net/tagCs/ –

Добавить обертку div и дать 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

источник

2013-02-28 11:39:11 Sowmya

Я применил text-align: center для обертки с 3 изображениями, может кто-нибудь объяснить, почему это работает? –

<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>

источник

2013-02-28 11:33:21 zkanoca

Вы попробовали это? Это не работает для меня: http://jsfiddle.net/eqAyg/ – membersound

Я набрал случайно плавающее свойство в стиле главного ди-джея. Он должен быть в каждом внутреннем div. – zkanoca

Вот пример того, как сделать это путем размещения поплавков в правильном порядке.

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; 
}

источник

2013-02-28 11:38:10 chriz

Попробуйте

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>

источник

2013-02-28 11:41:16

На самом деле это невозможно, не зная о содержании и макете. Но для точки начинающуюся, вы можете попробовать это:

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

источник

2013-02-28 11:45:12

Как выровнять 3 divs влево-вправо-вправо?

ответ

Смежные вопросы