Expandir div a largura máxima quando float: left é conjunto
https://stackoverflow.com/questions/1017880
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho algo parecido:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
ambos os carros alegóricos são neccesary. Eu quero o div conteúdo para preencher toda a tela menos os 100px para o menu. Se eu não uso flutuar a div expande exatamente como deveria. Mas como faço para definir isso quando flutuador está definido? Se eu usar sth como
style=width:100%
então o div conteúdo obtém o tamanho do pai, que é tanto o corpo ou de outra div que eu também tentei, e então é claro que não se encaixam direito do menu e depois é mostrado abaixo.
Solução
espero que eu entendi bem, dê uma olhada nisso: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>
Outras dicas
A maneira mais cross-compatível que eu encontrei de fazer isso não é muito óbvia. Você precisa remover a bóia da segunda coluna, e aplicar overflow:hidden a ele. Embora este parece estar escondendo qualquer conteúdo que vai para fora da div, ele realmente força a div para ficar dentro do seu pai.
Usando o código, este é um exemplo de como isso poderia ser feito:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
Hope isso é útil para qualquer pessoa tendo esse problema, é o que eu encontrei funciona melhor para o site que eu estava construindo, depois de tentar obtê-lo para se ajustar a outras resoluções. Infelizmente, isso não faz para o trabalho, se você incluir um div flutuava com o botão direito depois do conteúdo, bem como, se alguém sabe uma boa maneira de chegar a esse trabalho, com boa compatibilidade IE, eu ficaria muito feliz em ouvir isso.
New, opção melhor usando display: flex;
Agora que o modelo Flexbox é bastante amplamente implementado, eu realmente recomendo usá-lo em vez disso, uma vez que permite muito mais flexibility com o layout. Aqui está um simples de duas colunas como o original:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
E aqui está um três-coluna com uma coluna central flexível de largura!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
Solução sem fixar tamanho na sua margem
.content .right{
overflow: auto;
background-color: red;
}
+1 para Merkuro, mas se o tamanho do flutuador muda sua margem fixa falhará.
Se u usar acima CSS na div certo que vai muito bem mudar de tamanho com a mudança de tamanho no flutuador esquerdo. É um pouco mais flexível assim.
Verifique o violino aqui: http://jsfiddle.net/9ZHBK/144/
Os elementos que estão flutuando são levados para fora do layout fluxo normal, e elementos de bloco, como DIV, não abrangem a largura de seu pai. As regras mudam nesta situação. Em vez de reinventar a roda, confira este site para algumas soluções possíveis para criar o layout de duas colunas que são depois: http://www.maxdesign.com.au/presentation/page_layouts/
Especificamente, o "layout líquido duas colunas".
Felicidades!
Esta é uma solução atualizado para o HTML 5 se alguém estiver interessado e não gostava de "flutuante".
Table funciona muito bem neste caso, como você pode definir a largura fixa para a mesa &-célula da tabela.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/ código fonte original a partir @merkuro
este uso pode resolver seu problema.
width: calc(100% - 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>
E com base na solução de merkuro, se você gostaria maximizar o outro à esquerda, você deve usar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>
não foi testado no IE, por isso pode olhar quebrado no IE.
A resposta aceita pode funcionar, mas eu não gosto da idéia de sobreposição de margens. Em HTML5, você faria isso com display: flex;. É uma solução limpa. Basta definir a largura de um elemento e flex-grow: 1; para o elemento dinâmico. Uma versão editada de merkuros mexer: https://jsfiddle.net/EAEKc/1499/
Oi lá é uma maneira fácil com o método de transbordamento escondido no elemento de direito.
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html>
Este trabalho poder:
div{
display:inline-block;
width:100%;
float:left;
}
