Question

在我的代码中，在一个容器内将有三个街区。一个冻结在左边，一个冻结在右边，另一个将在这两个div之间滚动。就像现代网格一样。但我不想使用网格。

我试过了，但中心区块没有得到水平滚动。我希望不会破坏中心块，相反，它应该水平滚动。

* {
			box-sizing: border-box;
		}
		
		.container {
			width: 100%;
			overflow: auto;
			white-space: nowrap
		}
		
		.scroll-center {
			width: auto;
			overflow: auto;
			display: block;
			white-space: nowrap
		}
		
		.row {
			float: left;
		}
		
		.cell {
			padding: 3px;
			border: 1px solid #bbb;
			min-height: 25px;
			min-width: 200px;
		}

<div class="container">
		<div class="row">
		  <div class="cell">HeaderL1</div>
		  <div class="cell">HeaderL2</div>
		  <div class="cell">HeaderL3</div>
		</div>
		<div class="scroll-center">
			<div class="row">
				<div class="cell">HeaderT2</div>
				<div class="cell">Data21</div>
				<div class="cell">Data22</div>
			</div>
			<div class="row">
				<div class="cell">HeaderT3</div>
				<div class="cell">Data31</div>
				<div class="cell">Data32</div>
			</div>
			<div class="row">
				<div class="cell">HeaderT4</div>
				<div class="cell">Data41</div>
				<div class="cell">Data42</div>
			</div>
			<div class="row">
				<div class="cell">HeaderT5</div>
				<div class="cell">Data51</div>
				<div class="cell">Data52</div>
			</div>
			<div class="row">
				<div class="cell">HeaderT6</div>
				<div class="cell">Data61</div>
				<div class="cell">Data62</div>
			</div>
			<div class="row">
				<div class="cell">HeaderT7</div>
				<div class="cell">Data71</div>
				<div class="cell">Data72</div>
			</div>
			<div class="row">
				<div class="cell">HeaderT8</div>
				<div class="cell">Data81</div>
				<div class="cell">Data82</div>
			</div>
			<div class="row">
				<div class="cell">HeaderT9</div>
				<div class="cell">Data91</div>
				<div class="cell">Data92</div>
			</div>
		</div>
		<div class="right">
			<div class="row">
				<div class="cell">HeaderTR</div>
				<div class="cell">DataR1</div>
				<div class="cell">DataR2</div>
			</div>
		</div>
	</div>

Answer 1

您可能需要为容器添加宽度。现在它被设置为100％所以它不会超出浏览器窗口。相反，你可以做这样的事情：

.container {
    overflow: auto;
    white-space: nowrap;
     width:2000px;
}

我意识到您可能需要动态更改此值，但希望这可以让您开始

实施例：http://codepen.io/nilestanner/pen/jAjbdK

Answer 2

尝试使用例如：

的CSS：

* {
            box-sizing: border-box;
        }
.left, .center, .right{
          float:left

 }


        .center {
            width:400px;
            overflow: scroll;
            display: block;
            white-space: nowrap
        }
    #center-scroll{
      width:2000px;
    }
    .center .row{
          display:inline-block;
      width:33%;
        }
    .center .row .cell{

      min-width:100%;
        }


        .row{
          float:left;
        }
        .cell {
            padding: 3px;
            border: 1px solid #bbb;
            min-height: 25px;
            min-width: 200px;
        }

HTML

<div class="container">
  <div class="left">
  <div class="row" >
          <div class="cell">HeaderL1</div>
          <div class="cell">HeaderL2</div>
          <div class="cell">HeaderL3</div>
        </div>

  </div>

        <div class="center">
     <div id="center-scroll">
     <div class="row">
                <div class="cell">HeaderT2</div>
                <div class="cell">Data21</div>
                <div class="cell">Data22</div>
            </div>
            <div class="row">
                <div class="cell">HeaderT3</div>
                <div class="cell">Data31</div>
                <div class="cell">Data32</div>
            </div>
            <div class="row">
                <div class="cell">HeaderT4</div>
                <div class="cell">Data41</div>
                <div class="cell">Data42</div>
            </div>
            <div class="row">
                <div class="cell">HeaderT5</div>
                <div class="cell">Data51</div>
                <div class="cell">Data52</div>
            </div>
            <div class="row">
                <div class="cell">HeaderT6</div>
                <div class="cell">Data61</div>
                <div class="cell">Data62</div>
            </div>
            <div class="row">
                <div class="cell">HeaderT7</div>
                <div class="cell">Data71</div>
                <div class="cell">Data72</div>
            </div>
            <div class="row">
                <div class="cell">HeaderT8</div>
                <div class="cell">Data81</div>
                <div class="cell">Data82</div>
            </div>
            <div class="row">
                <div class="cell">HeaderT9</div>
                <div class="cell">Data91</div>
                <div class="cell">Data92</div>
            </div>
     </div>

        </div>
        <div class="right">
            <div class="row">
                <div class="cell">HeaderTR</div>
                <div class="cell">DataR1</div>
                <div class="cell">DataR2</div>
            </div>

        </div>
    </div>

中心Div滚动

2 个答案: