减小浏览器大小时如何阻止右侧的文章div崩溃到左侧的div？答案

【问题标题】：How to Stop to the article div on the right side from crashing into the left divs when decreasing the browser size?减小浏览器大小时如何阻止右侧的文章div崩溃到左侧的div？
【发布时间】：2015-06-25 01:02:59
【问题描述】：

请帮助我阻止右 div 撞到左 div。你可以在这个网站上看到：http://chelseachendesigns.com/About.html 从右侧最小化 scrn，然后崩溃....

<body>
<div id="wrapper">
  <header id="top">
    <h1> &nbsp;C H E L S E A &nbsp; C H E N </h1>
  </header>
</div>
<article id="bio">
    xxx
</article>
<div id="resume">
  xxx
 </div>



#bio {
    font-family: gruppo;
    font-style: normal;
    font-weight: 400;
    color: rgba(50,50,50,1.00);
    position: static;
    display: block;
    margin-top: 1%;
    font-size: 100%;
    text-align: left;
    margin-left: 5%;
    float: left;
    margin-right: 62%;
    overflow-x: hidden;
    overflow-y: hidden;
    clear: none;
}
body {
}
#flotus img {
    margin-left: 5%;
    left: auto;
    visibility: inherit;
    display: block;
    margin-top: -15%;
    position: static;
    float: left;
    width: 30%;
    height: auto;
}
#flotus {
    position: static;
    margin-top: -9px;
    float: none;
}
#resume {
    position: static;
    float: none;
    font-family: gruppo;
    font-style: normal;
    font-weight: 400;
    white-space: pre;
    display: block;
    margin-left: 58%;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 100%;
    margin-right: 5%;
    margin-top: 0%;

【问题讨论】：

标签： css floating

【解决方案1】：

首先，您需要学习一个响应式框架，例如boostrap，或者使用您自己的媒体查询。此外，您还有大量不需要的 CSS，并且您的 HTML 需要大量工作。

尽管如此 -

使用浮点数时，最好用 :after 伪元素。这消除了额外空的需要元素。浮动也应该有一些宽度应用于它们。方式你使用它们是负边距，这没有意义。
始终使用box-sizing:border-box;，这是为了边距/填充/边框。
块级元素不需要display:block;，除非你已经出于某种原因更改了它们。
您在很多元素上都有position:static，这是默认设置。请研究position CSS

这会让你开始。

<div id="wrapper">
    <article id="bio" class="font-style"></article>
    <div id="resume" class="font-style"></div>
</div>

* {
    box-sizing: border-box;
}

#wrapper:after {
    clear: both;
    display: table;
    content: "";
}

.font-style {
    font-family: gruppo;
    font-style: normal;
    font-weight: 400;
}

#bio {

    color: rgba(50,50,50,1.00);
    margin-top: 1%;
    text-align: left;
    float: left;
    width: 40%;
    padding: 2%;
}
#resume {
    float: left;
    width: 50%;
    text-align: right;
    white-space: pre;
    font-size: 100%;
    margin-right: 5%;
    margin-top: 0%;
}

@media (max-width:768px) {  /* or some other cut off width */
    #bio,
    #resume {
        float: none;
        width: 100%;
    }
}

【讨论】：

非常感谢！这行得通！除了当浏览器变得非常大时图像仍然会崩溃到生物上。但猜猜这甚至不会是一个大问题......
我没有为你做图像 b/c 我不知道你想要它在哪里。也是为什么我发布评论您在该链接上的 CSS 定位。
嗨抢！非常感谢......我想知道你是否愿意看看这个问题，因为它是一个类似的问题。非常感谢！！！！ stackoverflow.com/questions/31044433/…