横向并排

见代码
我想做的是模拟滚动条
在firebug里面看html的结构  发现container里面的结构是我需要的这个是模拟纵向的但是在container1里面就很郁闷了,他总是不能并排,有什么办法让他并排吗.....
想到比较不好的办法是 规定好结构,根据里面所有并排元素宽的和  赋给外层的div
似乎这样就比较麻烦,至少比上面那个模拟纵向的麻烦一些
有好的解决方法吗??????????<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Drag!!!</title>
<style type="text/css">
#container  {
height:200px;
_height:198px;
width:170px;
border:1px solid #999999;
overflow:hidden;
}
#container #content{
height:auto;
width:150px;
float:left;
}#container #content div{
height:30px;
width:100%;
}#container #scroll{
height:200px;
width:20px;
float:right;
}
#container #scroll #block{
width:20px;
height:20px;
background-color:#990000;
position:absolute;
}
/*===========================================================================================*/
/*===========================================================================================*/
/*===========================================================================================*/
#container1  {
height:200px;
width:400px;
_width:398px;
border:1px solid #999999;
overflow:hidden;}
#container1 #content1{
height:180px;
width:auto;
}#container1 #content1 div{
height:180px;
width:200px;
display:block;
float:left;
}#container1 #scroll1{
height:20px;
width:400px;
}#container1 #scroll1 #block1{
width:20px;
height:20px;
background-color:#990000;
position:absolute;
}
</style>
</head>
<body style="padding:40px;">
<div id="container">
<div id="content">
<div>aaaaa</div>
<div>bbbbb</div>
<div>vvvvv</div>
<div>ccccc</div>
<div>ddddd</div>
<div>eeeee</div>
<div>fffff</div>
<div>ggggg</div>
<div>hhhhh</div>
<div>zzzzz</div>
<div>uuuuu</div>
<div>kkkkk</div>
<div>lllll</div>
<div>ttttt</div>
<div>kkkkk</div>
<div>lllll</div>
<div>ooooo</div>
<div>ppppp</div>
<div>qqqqq</div>
<div>wwwww</div>
</div>
<div id="scroll">
<div id="block"></div>
</div>
</div>
<hr><hr>
<div id="container1">
<div id="content1">
<div>aaaaa</div>
<div>bbbbb</div>
<div>vvvvv</div>
<div>ccccc</div>
<div>ddddd</div>
<div>eeeee</div>
<div>fffff</div>
<div>ggggg</div>
<div>hhhhh</div>
<div>zzzzz</div>
<div>uuuuu</div>
<div>kkkkk</div>
<div>lllll</div>
<div>ttttt</div>
<div>kkkkk</div>
<div>lllll</div>
<div>ooooo</div>
<div>ppppp</div>
<div>qqqqq</div>
<div>wwwww</div>
</div>
<div id="scroll1">
<div id="block1"></div>
</div>
</div>    
    
</body>
</html>

解决方案 »

  1.   


    横排我会选择用Table tr套td来控制
      

  2.   

    <div id="bothConrainer">
     <div id="container"></container>
     <div id="container1"></container>
    </div>
    再控制bothConrainer就可以了,这个就不用多说了
      

  3.   

    你少了一个容器
    #container1 #content1 div div{
        height:180px;
        width:100px;
        display:block;
        float:left;
    }    <div id="container1">
            <div id="content1">
    <div style='width:40000px'>
               <div>aaaaa</div>
                <div>bbbbb</div>
                <div>vvvvv</div>
                <div>ccccc</div>
                <div>ddddd</div>
                <div>eeeee</div>
                <div>fffff</div>
                <div>ggggg</div>
                <div>hhhhh</div>
                <div>zzzzz</div>
                <div>uuuuu</div>
                <div>kkkkk</div>
                <div>lllll</div>
                <div>ttttt</div>
                <div>kkkkk</div>
                <div>lllll</div>
                <div>ooooo</div>
                <div>ppppp</div>
                <div>qqqqq</div>
                <div>wwwww</div>
    </div>
            </div>