如何制作可调整大小的 html/css 布局（肯定是重复的）？

Question

我无法调整我的网站大小我在网上搜索了一个简单的解决方案，但最终没有找到。

唯一接近我的目标的答案是：

<div id="topnav">
<div id="sidebar">
<div id="content">

里面有 2 divs

http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview

它有 4 个部分

这些部分是可以调整大小的，像这样：

--------------------------------------------------------
|                    this is fixed                     |
 -------------------------------------------------------
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|       left<|>right----------up/down    --------------|
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
|            |                                         |
--------------------------------------------------------

我已经尝试实现它，它按承诺工作，但我在实现我的布局时遇到问题（实际上是布局，我需要制作其中的 2 个）

第一个

--------------------------------------------------------
|                    this is fixed                     |
 -------------------------------------------------------
|     25%w   |              50%w            |    25% w |
|     75%h   |              75%h            |          | 33%h
|       left<|>right                        |          |
|            |                              |-up/down--|
|            |                              |          |
|            |                              |          | 33%h
|            |                              |          |
|            |                              |-up/down--|
|------------------up/down-------------left<|>right    |
|                                           |          | 33%h
|                 75%w   25%h               |          |
--------------------------------------------------------

第二个

--------------------------------------------------------
|                    this is fixed                     |
 -------------------------------------------------------
|     25%w   |              50%w            |    25% w |
|     50%h   |              50%h            |          | 50%h
|       left<|>right                   left<|>right    |
|            |                              |          |
|            |                              |          |
|------------------up/down-----------------------------| 
|            |                                         |
|            |                                         | 25%h
|       left<|>right-----------up/down-----------------| 
|            |                                         | 25%h
|            |                  75%w                   |
--------------------------------------------------------

我尝试制作第一个，我能制作一半，但最后，我在实现其他人时遇到了巨大的问题...

我的竖线有问题

我希望你能帮我解决这个问题，至少一些例子如何让 3 div 并肩工作，这是我最大的问题。

感谢

Answer 1

如果你想要并排放置 3 个 div，你应该试试 flexbox。这是 css 的一个简单位，它可以帮助您将位置 3 div 彼此相邻

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

看看吧！

了解其工作原理大约需要 5 分钟，而且非常简单

祝你好运，编码愉快！

编辑：如果您想要响应式缩放，请使用 bootstrap。如果这不是您任何问题的答案。那实在是万分抱歉

Answer 2

百分比宽度和高度结合 inline-block 属性，将为您提供想要实现的起点，如下例所示

html,body{
  margin:0;
  height:100%;
}
.container{
  height:100%;
  line-height:0;
 
}
.section{
  display:inline-block;
}
.w75{
  width:75%;
}
.w33{
  width:33.333%;
}
.w66{
  width:66.666%;
}
.w25{
  width:25%;
}
.w100{
  width:100%;  
}
.h100{
  height:100%;
}
.h75{
  height: 75%;
}
.h33{
  height:33.333%;
}
.h25{
  height:25%;
}
.red{
  background:red;
}
.blue{
  background:blue;
}
.green{
  background:green;
}
.brown{
 background:brown;
}

  <div class="container">
    <section class="section w75 h100">
      <section class="section w33 h75 red">

      </section><section class="section w66 h75 blue">
     
      </section><section class="section w100 h25 green">
  
      </section>
    </section><section class="section w25 h100">
      <section class="section w100 h33 green">
       
      </section><section class="section w100 h33 red">
    
      </section><section class="section w100 h33 brown">

      </section>
    </section>
  <div>

小心避免行内块元素之间的 space 参考 here

Answer 3

我的三个 divs 工作正常。我正在使图 1 中正确的 divs 正常工作，这只需要一段时间（您真的向我们扔了一颗手榴弹 :)）。

这是工作 plnk。

您想使用百分比来让 divs 排队。

编辑：我修复了一些错误。我没有为右边 divs 设置最大值或调整。我认为您应该能够管理这些并且可以将它们置于底部 div.

的限制之上

var app = angular.module('myApp', ['mc.resizer']);

app.controller('MainCtrl', function($scope) {
  $scope.content = 'Hello World';
});
angular.module('mc.resizer', []).directive('resizer', function($document) {

  return function($scope, $element, $attrs) {

    $element.on('mousedown', function(event) {
      event.preventDefault();

      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {

      if ($attrs.resizer == 'vertical') {
        // Handle vertical resizer
        var x = event.pageX;

        if ($attrs.resizerMax && x > $attrs.resizerMax) {
          x = parseInt($attrs.resizerMax);
        }

        $element.css({
          left: x + 'px'
        });

        $($attrs.resizerLeft).css({
          width: x + 'px'
        });
        $($attrs.resizerRight).css({
          left: (x + parseInt($attrs.resizerWidth)) + 'px'
        });

        if ($attrs.id == "right-vertical-resizer") {
          $("#sidebar-resizer").css({
            left: '25%'
          });
          $("#top-content").css({
            left: '25%'
          });
          $("#sidebar").css({
            width: '25%'
          });
        }
      } else {
        // Handle horizontal resizer
        var y = window.innerHeight - event.pageY;

        if ($attrs.resizerMax && y > $attrs.resizerMax) {
          y = parseInt($attrs.resizerMax);
        }
        if ($attrs.id == "right-horizontal-1-resizer" || $attrs.id == "right-horizontal-2-resizer") {
          $element.css({
            bottom: (y - 4) + 'px'
          });
          $($attrs.resizerBottom).css({
            top: (event.pageY - 32) + 'px'
          });
        } else if ((event.pageY + 745) > parseInt($attrs.resizerMax)) {
          $element.css({
            bottom: (y - 5) + 'px'
          });
          $($attrs.resizerBottom).css({
            top: (event.pageY - 32) + 'px'
          });
        }

        if ($attrs.id == "content-resizer") {
          $('#sidebar-resizer').css({
            bottom: (y + parseInt($attrs.resizerHeight)) + 'px',
            height: window.innerHeight - y - 35 + 'px'
          })
        }
      }
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  };
});

#topnav {
  display: block;
  height: 35px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #DDD;
}

#sidebar {
  background-color: #EEE;
  position: absolute;
  top: 0;
  bottom: 25%;
  height: 100%;
  width: 100%;
  left: 0;
  overflow: auto;
}

#top-content {
  position: absolute;
  top: 0;
  padding-left: 10px;
  height: 100%;
  width: 100%;
  left: 25%;
  right: 0;
  background-color: #444;
  color: #FFF;
  overflow: auto;
}

#right-top {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  background-color: #EEE;
  overflow: hidden;
}

#right-middle {
  position: absolute;
  top: 34%;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  background-color: #888;
  overflow: hidden;
}

#right-bottom {
  position: absolute;
  top: 67%;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  background-color: #999;
  overflow: hidden;
}

#bottom-content {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 74%;
  left: 0;
  right: 0;
  overflow: auto;
  background-color: #777;
}

#sidebar-resizer {
  background-color: #666;
  position: absolute;
  top: 0;
  bottom: 26%;
  left: 25%;
  width: 6px;
  cursor: e-resize;
}

#right-horizontal-1-resizer {
  position: absolute;
  height: 6px;
  width: 100%;
  bottom: 66%;
  left: 0;
  right: 0;
  background-color: #666;
  cursor: n-resize;
}

#right-horizontal-2-resizer {
  position: absolute;
  height: 6px;
  width: 100%;
  bottom: 33%;
  left: 0;
  right: 0;
  background-color: #666;
  cursor: n-resize;
}

#right-vertical-resizer {
  background-color: #666;
  position: absolute;
  top: 35px;
  bottom: 0;
  right: 25%;
  width: 6px;
  cursor: e-resize;
}

#content-resizer {
  position: absolute;
  height: 6px;
  width: 100%;
  bottom: 26%;
  left: 0;
  right: 25%;
  background-color: #666;
  cursor: n-resize;
}

#left-content {
  position: absolute;
  top: 35px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

#right-content {
  position: absolute;
  top: 35px;
  bottom: 0;
  left: 75%;
  right: 0;
  overflow: hidden;
}

#sidebar-resizer:hover,
#content-resizer:hover,
#right-vertical-resizer:hover,
#right-horizontal-1-resizer:hover,
#right-horizontal-2-resizer:hover {
  background-color: #AAA;
}

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <html ng-app="myApp">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
  <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script>
</head>

<body ng-controller="MainCtrl">

  <div id="topnav">Top navbar</div>

  <div id="left-content">

    <div id="sidebar">
      <h3>Side navbar</h3>
    </div>

    <div id="top-content">Top content
      <p>{{content}}</p>
    </div>

    <div id="bottom-content">Bottom content</div>

    <div id="sidebar-resizer" resizer="vertical" resizer-width="6" resizer-left="#sidebar" resizer-right="#top-content" resizer-max="400">
    </div>

    <div id="content-resizer" resizer="horizontal" resizer-height="6" resizer-top="#top-content" resizer-bottom="#bottom-content" resizer-max="800">
    </div>
  </div>

  <div id="right-content">

    <div id="right-top">Right Top content</div>

    <div id="right-middle">Right Middle content</div>

    <div id="right-bottom">Right Bottom content</div>

    <div id="right-horizontal-1-resizer" resizer="horizontal" resizer-height="6" resizer-top="#right-top" resizer-bottom="#right-middle">
    </div>

    <div id="right-horizontal-2-resizer" resizer="horizontal" resizer-height="6" resizer-top="#right-middle" resizer-bottom="#right-bottom">
    </div>
  </div>




  <div id="right-vertical-resizer" resizer="vertical" resizer-width="6" resizer-left="#left-content" resizer-right="#right-content">
  </div>

</body>

</html>

如何制作可调整大小的 html/css 布局（肯定是重复的）？

How to make a resizable html/css layout (duplicate for sure)?

html

css

resize