响应式css，元素相互流入答案

【问题标题】：responsiv css, element flows in to each other响应式css，元素相互流入
【发布时间】：2017-04-07 18:11:03
【问题描述】：

我正在尝试构建一个响应式网页，它适用于高达 640 像素的小屏幕和更大的屏幕。有两个相邻的元素。问题在于断点 640 像素和更大的屏幕之间。直到你伸展到更大的屏幕，这两个元素才会相互浮动。比如可能在 640 像素和高达 800 像素之间..

这是两个元素彼此相邻放置的 css。

@media screen and (min-width: 640px) {

article {
    max-width: 75%;
    position: absolute;
    margin-right: 2em;
}

aside {
    float: right;
    display: inline;
    max-width: 20%;     
}

我怎样才能让它们不相互浮动？

【问题讨论】：

你能发布html和其他媒体查询吗？
请分享所有相关代码。 HTML 和 CSS

标签： css responsive-design css-float

【解决方案1】：

您的position: absolute 正在制造问题。不知道你为什么需要它。

你在寻找下面的东西吗

HTML：

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

CSS：

.left, .right {
    float: left;
    border: 1px solid red;
    height: 200px;
    box-sizing: border-box;
}
.left {
    width: 70%;
}
.right {
    width: 30%;
}

【讨论】：