Question

我有一些用于两个图的html：

<div style="width:90%;margin:auto;">
    <div style="width:48%;height:100%;min-width:350px;float:left;margin:auto;"></div>
    <div style="width:48%;height:100%;min-width:350px;float:left;margin:auto;"></div>
</div>

它执行以下操作：如果图形适合（容器大于700 / 0.9px），则图形并排出现。大！如果容器太小，它们会分开放置。大！但是他们每个人仅占这些单独行的48％，这不是我想要的。我想要的是这样：

<div style="width:90%;margin:auto;">
    <div style="width:90%;height:100%;min-width:350px;float:left;margin:1%/auto;PRIORITIZE HORIZONTAL FIT;"></div>
    <div style="width:90%;height:100%;min-width:350px;float:left;margin:1%/auto;PRIORITIZE HORIZONTAL FIT;"></div>
</div>

因此，如果它们在分开的行中，它们占据了div宽度的90％，但是在同一行中则占据了48％。我不知道优先级水平拟合命令，也不知道如何有条件地进行边距处理，但似乎在HTML中应该可以实现。

我可以使用JavaScript if (document.getElementById('divID').scrollwidth>700)充实条件条件，但我不想使用inner.HTML（我从stats程序获取的输出为svgs，并摆脱了回车符或将每行连接成一个字符串也很麻烦，但是肯定有一种方法可以用HTML来实现。

它应该像这样：

| |----------1----------| |----------2----------| |

或

| |-----1-----| |-----2-----| |

或

| |-------1-------| |
| |-------2-------| |

取决于窗口的宽度。我想念一些简单的事情，对吧？！

Answer 1

Flexbox来解救！尝试调整外框的大小：

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  flex: 1;
  min-width: 150px; /* shrunk from 350 for the snippet */
  max-width: 90%;
  margin: 0 1%;
}

/* the rest is just for this example */
.red{background:maroon;border:3px solid red;}
.blue{background:navy;border:3px solid blue;}
#container{border:3px dotted black;resize:horizontal;overflow:hidden;}
.box{height:50px;}

<div id="container">
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

display: flex定义一个块弹性容器。 flex-wrap: wrap让盒子包装成两行。 justify-content: center将盒子放在容器的中心。 flex: 1是flex-grow: 1的简写（让盒子平均增长），flex-shrink: 1（让盒子平均缩小至min-width），flex-basis: 0（分发额外空间不受包装盒内容的影响。

Answer 2

或者您可以使用引导程序来做到这一点。不建议使用内联类。

.red {
  background-color: #a10909;
  color: #fff;
  height: 100px;
}

.blue {
  background-color: #093fa1;
  color: #fff;
  height: 100px;
}

.box {
  padding: 10px;
  margin: 0 auto;
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="box red">1</div>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="box blue">2</div>
      </div>
    </div>
  </div>
</body>

</html>

最小宽度，水平行，宽度百分比优先级

2 个答案: