ti-enxame.com

Div lado a lado sem flutuar

Como posso fazer div 'esquerda' e 'direita' parecer colunas lado a lado? 

Eu sei que posso usar float: left neles e que vai funcionar ... mas nos passos 5 e 6 aqui http://www.barelyfitz.com/screencast...s/positioning/ o cara diz que é possível, eu não consigo trabalhar ...

Código:

<style>
div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}
</style>

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>
60
Praneel PIDIKITI

O método usual quando não está usando floats é usar display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

Observe suas limitações: Há um espaço adicional após o primeiro bloco - isso ocorre porque os dois blocos agora são essencialmente elementos inline, como a e em, portanto, os espaços em branco entre as duas contagens. Isso poderia quebrar seu layout e/ou não parecer legal, e eu preferiria não excluir todos os espaços em branco entre os caracteres para que isso funcione. 

Flutuadores também são mais flexíveis, na maioria dos casos. 

98
Yi Jiang

Um div é um elemento de nível de bloco , o que significa que se comportará como um bloco e os blocos não poderão ficar lado a lado sem serem flutuantes. Você pode, no entanto, configurá-los para elementos inline com:

display:inline-block;

De uma chance...


Outra maneira é colocá-los usando:

position:absolute;
left:0;

e/ou

position:absolute;
right:0;

Nota: Para que isso funcione como esperado, o elemento wrapper deve ter um position:relative; para que os elementos com posicionamento absoluto permaneçam relativos ao elemento wrapper.

19
Zuul

Você também pode usar o layout CSS3 flexbox, que é bem suportado hoje em dia.

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background:black;
    height:400px;
    width:450px;
}

.left {
    flex: 0 0 300px;
    background:blue;
    height:200px;
}

.right {
    flex: 0 1 100px;
    background:green;
    height:300px;
}

Veja Exemplo (com estilos legados para máxima compatibilidade) e Saiba mais sobre flexbox.

2
Oriol

Eu estou atualmente trabalhando nisso, e eu já tenho uma série de soluções. É bom ter um site de alta qualidade, que eu possa usar também para minha conveniência. Porque se você não Escreva essas coisas, você acabará esquecendo algumas partes. E eu também posso recomendar escrever algumas dicas básicas se você estiver iniciando qualquer tipo de nova programação/design.

Então, se as funções float estão causando problemas, há algumas opções que você pode tentar.

Uma é modificar o alinhamento div na tag div da mesma forma como <div class="kosher" align=left> Se isso não combina com você, então existe outra opção com margem assim.

.leftdiv {
    display: inline-block;
    width: 40%;
    float: left;
}
.rightdiv {
    display: block;
    margin-right: 20px;
    margin-left: 45%;
}

Não esqueça de remover o <div align=left>.

2
Peter Gruppelaar

Você pode tentar com margem para div direita

margin: -200px 0 0 350px;
1
giker

Use display:table-cell; para remover espaço entre .Left e .Right

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container > div {
    display: table-cell;
}
<div class="container">
  <div>
    <div class="left">
      LEFT
    </div>
  </div>
  <div>
    <div class="right">
      RIGHT
    </div>
  </div>
</div>

0
Mehdi