在页面上放置 5 个可调整大小的 div

Question

我正在尝试为图片上的 5 个 div 设置位置，并用于此引导网格。现在我有 3 行，所以第一行 div1 和 div4，第二行 div2 和 div5，第三行 div3，每个 div 都是可调整大小的（我使用 CSS 属性类“resize”）

所以， 第一个问题是我调整 div 1 的大小，所以 div 4 跳到 div 1 下的底部 第二个问题是因为我使用的是引导程序行，我的左侧比右侧长，并且它不允许我将其设置为相等

解决此问题的最佳方法是什么？

现在这是我的代码

<div class="container-fluid ">
    <div class="content">
        <div class="row">
            <div class="childTree">
                <div id="industry"></div>
            </div>
            <div class="parentGrid" style="overflow-x: hidden; overflow-y: hidden;">
                <table id="table">
                </table>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="row">
            <div class="parentTree">
                <div id="clinical"></div>
            </div>
            <div class="childGrid">
                    <div id="tree-container"></div>
                </div>
            </div>
        </div>
    <div class="content">
        <div class="row">
            <div class="childTree">
                <div id="study"></div>
            </div>
        </div>
    </div>
</div>

Answer 1

考虑过 flex 吗？ codepen to play with

/* add resize for demo on hover */

div:hover {
  min-height: 150px;
  min-width: 50vw;
  max-height: 150px;
}
/* end demo with resize on :hover */

main,
aside,
section,
div {
  display: flex;
}
section,
div {
  flex: 1;
  min-width: 25vw;
}
aside,
section,
div {
  flex-flow: column;
}
div {
  border: solid #5B8EC4;
  background: linear-gradient(to bottom, #9EC5FD, #468BD2) #5B8EC4;
  color: white;
  margin: 5px;
  align-items: center;
  justify-content: center;
}
html,
body,
main {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  padding: 1em;
}
body {
  border: solid #5B8EC4;
}

<main>
  <aside>
    <div> run snippet in full page mode to notice behavior in good condition</div>
    <div>2
    </div>
    <div>3
    </div>
  </aside>
  <section>
    <div>4
    </div>
    <div>5
    </div>
  </section>
</main>

sn-p 没有高度但有内容和调整大小的句柄：

main,
aside,
section,
section>div 
aside>div{
  display: flex;
}

p {
  resize: both;
}


section> div ,
aside>div{
  flex: 1;
}

section {
  flex: 2
}

aside,
section,
section > div ,
aside> div{
  flex-flow: column;
}
aside {  
  overflow: auto;
  resize: both;
  width:25vw;/* some width to start with */
}
aside,
section {
  background: gray;
  padding:1em;
}

section > div,
aside > div {

  border: solid #5B8EC4;
  background: linear-gradient(to bottom, #9EC5FD, #468BD2) #5B8EC4;
  color: white;
  margin: 1em;
  align-items: center;
  justify-content: center;
}

div div {
  overflow: auto;
  resize: both;
  color: white;
  height:100%;
}

html,
body,
main {
  margin: 0;
  box-sizing: border-box;
}

html {
  padding: 1em;
}

body {
  border: solid #5B8EC4;
}

<main>

  <aside>
    <div>
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Aenean ultricies mi vitae est</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
    </div>
    <div>
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
    </div>
    <div>
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
    </div>
  </aside>
  <section>
    <div>
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
    </div>
    <div>
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
    </div>
  </section>
</main>