Question

HTML：

 <div class="leftwrapper">
  <div class="left">left div</div>
  <div class="middle">middle div</div>
 </div>
 <div class="right">right div</div>

CSS：

.leftwrapper{
  float: left;
  width: 75%;
}

.left{
    float:left;
    background:green;
    width: 30%;
    max-width: 75px;
}

.middle{
  background: blue;
  overflow: hidden;
}

.right{
    float: right;
    background:red;
    width: 30%;
    max-width: 75px;
}

在上面的例子中，我想：

调整浏览器大小时，将所有三个div保持在同一行（目前，右侧div移动到左下方），
使蓝色/中间div调整大小以填充左右之间的空间。就目前而言，当您扩展浏览器时，边距会增加。你如何保持一致？

作为一个注释：HTML divs的结构是故意的（'leftwrapper'包含两个div，浮动在右边div），所以请不要涉及重组div的答案！

Answer 1

我会添加flex parent，并使用flex-grow使元素增长，以填充您希望发生这种情况的可用空间。

＆＃13;

.flex {
  display: flex;
}
.grow {
  flex-grow: 1;
}
.middle {
  background: blue;
}

.left {
  background: green;
  width: 30%;
  max-width: 75px;
}

.right {
  background: red;
  width: 30%;
  max-width: 75px;
}

＆＃13;

<div class="flex">
  <div class="leftwrapper flex grow">
    <div class="left">left div</div>
    <div class="middle grow">middle div</div>
  </div>
  <div class="right">right div</div>
</div>

＆＃13;

Answer 2

将您的CSS更改为此，它将很好地工作。

.leftwrapper {
  float: left;
  width: 100%;
  max-width: calc(100% - 75px);
}

.middle {
  background: blue;
  overflow: hidden;
}

.left {
    float: left;
    background: green;
    width: 30%;
    max-width: 75px;
}

.right {
    float: left;
    background: red;
    width: 30%;
    max-width: 75px;
}

我所做的是将.leftwrapper的宽度更改为100％但添加到max-width属性中并使用calc()确保它75px小于100 1) show arrayName 2) show arrayName arrayIndex它可以填满的空间的百分比。这样可以调整视口大小，确保它很好地保持在一条线上。

有关calc()的MDN信息。

Answer 3

@ j.winslow我刚刚更新了JSFIDDLE http://jsfiddle.net/enRkR/1232/

我添加了这个：

def snakecase(newname):
    def decorator(method):
          method.__name__ = newname
          return method
    return decorator

class Product:
    def __init__(self, name, last_name, age):
        self.name = name
        self._last_name = last_name
        self.age = age

@snakecase('increase_years')
def IncreaseYears(self, n_years):
    self.age += n_years

这是你要找的？此致！

CSS：如何在具有一致边距的同一行上水平浮动两个div？

3 个答案: