Question

我有两个d = ["10-8-2015@Mon, Aug 10, 2015", "11-8-2015@Tue, Aug 11, 2015", "12-8-2015@Wed, Aug 12, 2015","13-8-2015@Thu, Aug 13, 2015", "14-8-2015@Fri, Aug 14, 2015", "7-8-2015@Fri, Aug 07, 2015", "8-8-2015@Sat, Aug 08, 2015", "9-8-2015@Sun, Aug 09, 2015"] >>> def sorting(L): ... splitup = L.split('-') ... return splitup[1], splitup[0] ... >>> sorted(d, key=sorting) ['10-8-2015@Mon, Aug 10, 2015', '11-8-2015@Tue, Aug 11, 2015', '12-8-2015@Wed, Aug 12, 2015', '13-8-2015@Thu, Aug 13, 2015', '14-8-2015@Fri, Aug 14, 2015', '7-8-2015@Fri, Aug 07, 2015', '8-8-2015@Sat, Aug 08, 2015', '9-8-2015@Sun, Aug 09, 2015']彼此相邻。

当我全屏查看页面时，他们没事。

但是当我重新调整窗口大小时，右侧div会向右移动。看起来很乱。

- 当我重新调整大小时，我不希望这个盒子相互依赖。

我尝试使用div max-width;，但我无法使其发挥作用。

- 我试图用Windows大小将字体大小更改为更小/更大。我尝试过; min-width;也无法使其发挥作用。

CSS：

font-size: 70%;

HTML

.leftbox {
    top: 15%;
    position: absolute;
    color: white;
    padding: 10px;
    font-size: 2em;
    max-width: 700px;
    overflow: hidden;
    background: rgba(121, 183, 0, 0.9);
    box-shadow: 0 4px 10px 4px rgba(43, 141, 6, 0.85);
}

#rightbox {
    top: 15%;
    right: 5%;
    position: absolute;
    background: rgba(121, 183, 0, 0.9);
    padding: 40px;
    max-width: 500px;
    border-radius: 4px;
    box-shadow: 0 4px 10px 4px rgba(43, 141, 6, 0.85);
    font-size: 2em;
    color: white;
}

JSFiddle：https://jsfiddle.net/p6mttf9q/

Answer 1

查看此JSFiddle

使用绝对元素时，它是最好的。执行这个技巧的代码是：

.leftbox {
  max-width: calc(50% - 28px);
}

和

#rightbox {
  max-width: calc(45% - 88px);
}

我在这里做的是计算两个div的最大宽度，因为你不希望它们重叠。想到你想要两个容器大约需要50％，这就是它对两个盒子的计算：

左框：50％ - 填充（两侧10px） - 盒子阴影（两侧4px）。

右框：50％ - 边距右（5％） - 填充（两侧40px） - 盒子阴影（两侧4px）

Answer 2

我喜欢@JiFus方法，但还有一个选项，你可以编写媒体查询并覆盖

position: absolute;

通过

position: relative;

用于较小的屏幕或设备。

例如，您可以使用：

@media screen and (max-width: 800px) {
.leftbox { position: relative !important; }
#rightbox { position: relative !important; }
}

这里是jsfiddle链接：https://jsfiddle.net/p6mttf9q/4/

用窗口重新调整css框的大小

2 个答案: