Question

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

所以，第一个问题是然后我调整div 1，所以div 4跳到div 1下面的底部第二个问题是因为我使用了一些引导程序，我的左侧比右侧更长，而且它不允许我将它设置为相等

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

https://msdn.microsoft.com/en-us/library/7zxb70x7.aspx

这是我现在的代码

<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>

没有高度但内容和调整大小句柄的代码段：

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>

在页面上定位5个可调整大小的div

1 个答案: