Question

请帮我阻止正确的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%;

Answer 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%;
    }
}

在减小浏览器大小时，如何停止右侧的文章div崩溃到左侧div？

1 个答案: