Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Preciso criar uma página que disponha várias DIVs na horizontal, uma ao lado da outra, e a largura de todas elas somadas irá extrapolar o tamanho do tela, ou seja, necessariamente usarei a barra de rolagem horizontal.
Mas estou tendo dificuldades para dispor essas várias DIVs na horizontal (sem pular para linha debaixo ao completar o tamanho da tela). Obrigatoriamente devo usar CSS.
Não sei se fui claro ao expor minha dúvida, agradeço qualquer ajuda.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<title>Lado a lado </title>
<style type="text/css">
* { margin: 0; padding: 0; }
.box { float: left; width: 150px; height: 150px; background-color: #F00; margin: 0 15px; }
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>Então pessoal,
É isso mesmo que precisava, mas tem um problema.. Quando essas DIVs ocupam toda a largura da tela, as novas DIVs são colocadas na linha de baixo. Eu precisava que elas continuassem sempre na mesma linha, ou seja, que eu usasse o scroll horizontal para visualizá-las..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<title>Lado a lado </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#tudo {
overflow: auto;
}
.box {
float: left;
width: 150px;
height: 150px;
background-color:
#F00;
margin: 10px 15px;
}
</style>
<script type="text/javascript">
function tamanho(){
var divs = document.getElementById("tudo").getElementsByTagName("div");
var total = 180 * divs.length; // 180 é o tamanho de largura mais a margem
alert(total);
document.getElementById("tudo").style.width = total+"px";
}
</script>
</head>
<body onload="tamanho();">
<div id="tudo">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>hehe
isso aí! valeu!
Eu não consegui entender o que voc6e pretende fazer http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif