Question

这是我的代码：

.container{
  border:1px solid;
  width: 70%;
}

.el {
  border: 1px solid red;
  display: inline-block;
  min-width: 250px;
}

<div class="container">
  <div class="el">one</div>
  <div class="el">two</div>
  <div class="el">three</div>
  <div class="el">four</div>
  <div class="el">five</div>
  <div class="el">six</div>
  <div class="el">seven</div>
  <div class="el">eight</div>
</div>

请运行上面的代码段，点击整页按钮并调整页面大小。我想将div.container分成相等的部分。

因此，如果一行中有三个元素（div.el），那么它们的width应为33%。如果连续两个元素，则width应为50%。

我该怎么做？注意到我不想使用像Bootstrap这样的任何框架。

Answer 1

查看Media Queries

使用示例：

// Foo's original width is 100%
.foo {
    width: 100%
}

@media screen and (max-width: 100px){
    // Foo's width will be 50% when the view's width is below 100px
    .foo {
        width: 50%
    }
}

... OR ...

@media screen and (min-width: 100px){
    // Foo's width will be 50% when the view's width is over 100px
    .foo {
        width: 50%
    }
}

Answer 2

尝试使用css flex-box。为您的容器应用display:flex;属性，并使用.el操纵该容器内的项flex-grow: 1;，将它们拉伸到剩余的屏幕宽度并相应地共享空间。

.container{
  display: flex;
  width: 70%;
  border: 1px solid black;
}
.el {
  border: 1px solid red;
  flex-grow: 1;
}

<div class="container">
  <div class="el">one</div>
  <div class="el">two</div>
  <div class="el">three</div>
  <div class="el">four</div>
  <div class="el">five</div>
  <div class="el">six</div>
  <div class="el">seven</div>
  <div class="el">eight</div>
</div>

CodePen示例：https://codepen.io/CapySloth/pen/LLBgEB

Answer 3

<div class="container">
  <div class="el">one</div>
  <div class="el">two</div>
  <div class="el">three</div>
  <div class="el">four</div>
  <div class="el">five</div>
  <div class="el">six</div>
  <div class="el">seven</div>
  <div class="el">eight</div>
</div>

{{1}}

Answer 4

鉴于我自己这样做，我几乎完全确定最好的方法是使用flexbox flex-wrap使项目溢出，flex-grow使它们占用尽可能多的空间。

<div id="cont">
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
</div>

#cont {
  display: flex;
  flex-wrap: wrap;
}

#cont div {
  flex-grow: 1;
  background: red;
  padding: 10px;
  margin: 10px;
}

请参阅here或my own website。

请注意，这不是网格系统，因此最后一行不会遵循与之前所有（完整的）相同的列宽。如果你希望单元格在空间可用的情况下溢出并且在最后一行看起来像一个网格，那么你需要使用一些JavaScript。

如何根据屏幕尺寸为元素创建动态宽度？

4 个答案: