问题！重要（我认为）

Question

基本上，

inside a div i have 2 divs
div #1 has an img inside
div #2 has text and a list inside

外部div有一个填充，第一个div包含图像有一个浮动左边和上边距，第二个div包含文本和列表有一个浮动右边和上边距

它们的大小以百分比形式设置，然后我还有一个@media查询，用于检查最大宽度和最大高度。

如果浏览器在高度或宽度的一定像素数下调整大小，则某些边距和宽度/高度会发生变化，包含图像的div会在中间，另一个包含文本和列表的div会在中间在包含图像的div下。

现在-----

我使用了！对于媒体查询中的一些css代码很重要，并且出于某种原因，包含图像的div和包含文本和列表的div卡在中间，图像在顶部，文本在列表下面。

我从媒体查询中取出了！important，但它们仍然被卡住了......

他们就像这样（媒体查询输出）：

__________
|        |
|        |
|________|
__________
|        |
|        |
|________|

如果它们是这样的（正常的CSS输出）：

__________       __________
|        |       |        |
|        |       |        |
|________|       |________|

jsFiddle Link <<<<

现在奇怪的是我试图通过再次编写代码来重现jsFiddle中的错误，但这次只是针对图像和文本而我没有得到同样的问题......

sample error

Answer 1

在您的css

中的此部分下

@media screen and (max-width: 900px),
screen and (max-height: 875px) {
........
........

您尚未设置要显示的div：内联块以及ID为#web-adv-info的信息div的相对宽度为100％

这部分我做了一些调整

 #big-icon-wrapper {
    width: 39.6%;
    display:inline-block;
    float: none;
    margin: 2vh auto 0;
  }
  #web-adv-info {
    display:inline-block;
    float: none;
    width: 50%;
    margin: 2vh 0;
  }

在这里摆弄

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  background: lightgrey;
}

body {
  width: calc(100% - 1vw);
  height: calc(100% - 1vh);
  padding: 0.5vh 0.5vw;
}


/*outer shell*/

#top-bar,
nav,
#footer {
  background: aliceblue;
}


/*main shell*/

#outer-body-wrapper {
  background: aliceblue;
}

#top-bar {
  width: 100%;
  min-height: 2.563em;
  height: 8%;
  font-size: 0.8em;
}

#top-bar > img {
  height: 80%;
  margin: 0.5em 0 0 0.5em;
  float: left;
}

#top-bar-options {
  border-left: 4px dashed lightgrey;
  height: 100%;
  width: 20%;
  float: right;
}

#top-bar-options > a {
  width: 80%;
  margin: 5px auto 0;
  display: block;
  border: 1px solid black;
  text-align: center;
}

#fc {
  position: relative;
  float: right;
  height: 100%;
  width: 75px;
  min-width: 75px;
}

#fc > span {
  font-size: 40px;
  min-font-size: 20px;
  bottom: -9px;
  float: left;
  color: lightgrey;
  position: absolute;
  width: 100%;
}

#outer-body-wrapper {
  width: 90%;
  height: calc(76% + 6px);
  overflow: auto;
  margin: 12px auto 0;
}

#body-title {
  width: 100%;
  background: grey;
  text-align: center;
  float: left;
  height: 10%;
  font-size: 3em;
}

#inner-body-wrapper {
  background: green;
  width: 100%;
  overflow: auto;
  height: 66%;
  float: left;
}

#big-icon-wrapper {
  width: 55%;
  float: left;
  margin: 3vh 0 0;
}

#big-icon-wrapper > img {
  margin: 0 auto;
  width: 100%;
  display: inline-block;
  border: 1px solid black;
}
#big-icon-wrapper{
  border:solid 
}

#web-adv-info {
  background: orange;
  width: 40%;
  margin: 15vh 0 0;
  display:inline-block;
  border:solid red;
}

#web-adv-info > ul {
  margin: 0 0 0 2.4vw;
}

#under-inner-body-wrapper {
  width: 100%;
  height: calc(12% - 1vh);
  text-align: center;
  padding: 1vh 0 0;
  float: left;
}

#banner {
  float: left;
  width: 100%;
  height: 12%;
}

#footer {
  width: 100%;
  height: 10%;
  min-height: 60px;
  margin: 5px 0 0 0;
}

#c-right {
  padding: 10px;
  float: left;
  font-size: 0.8em;
  width: 60%;
  height: calc(100% - 20px);
}

#c-assistance {
  float: right;
  width: 20%;
  min-width: 75px;
  height: 100%;
  background: yellow;
}

#c-assistance > a {
  margin: 0 0 0 0;
  width: 52%;
  color: black;
  background: red;
  display: inline;
  text-decoration: none;
  text-align: center;
}

#c-assistance > a:first-child {
  margin: 1em 0 0;
}

nav {
  margin: 3px auto 0;
  width: 60%;
  height: 30px;
}

nav > ul {
  width: 100%;
  height: 5%;
  margin: 0;
}


/*nav > ul > li:nth-child(1) {
    background: red;
}
nav > ul > li:nth-child(2) {
    background: black;
}
nav > ul > li:nth-child(3) {
    background:blue;
}
nav > ul > li:nth-child(4) {
    background: yellow;
}*/

nav > ul > li {
  width: 25%;
  font-size: 1em;
  height: 30px;
  float: left;
  color: black;
  list-style-type: none;
}

nav > ul > li > a {
  width: 100%;
  height: calc(100% - 5px);
  padding-top: 5px;
  text-align: center;
  display: block;
  color: #000;
  text-decoration: none;
}

nav > ul > li > a:hover {
  background: lightgrey;
  color: aliceblue;
}

nav,
nav > ul,
nav > ul > li:first-child,
nav > ul > li > a {
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 30px;
}

nav,
nav > ul,
nav > ul > li:first-child,
nav > ul > li > a {
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 30px;
}

@media screen and (max-width: 900px),
screen and (max-height: 875px) {
  nav {
    width: 90%;
  }
  #outer-body-wrapper {
    width: 95%;
    height: calc(76% - 10px);
  }
  #body-title {
    font-size: 1.4em;
  }
  #inner-body-wrapper {
    padding: 0 10%;
    width: 80%;
  }
  #big-icon-wrapper {
    width: 39.6%;
    display:inline-block;
    float: none;
    margin: 2vh auto 0;
  }
  #web-adv-info {
    display:inline-block;
    float: none;
    width: 50%;
    margin: 2vh 0;
  }
}

@media screen and (max-width: 490px),
screen and (max-height: 600px) {
  #top-bar > img {
    height: 100%;
    margin: 0;
  }
  nav {
    width: 100%;
    margin-top: 1px;
  }
  nav,
  nav > ul,
  nav > ul > li:first-child,
  nav > ul > li > a {
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
  }
  nav,
  nav > ul,
  nav > ul > li:first-child,
  nav > ul > li > a {
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
  }
  #outer-body-wrapper {
    width: 100%;
    height: calc(76% - 38px);
  }
  #c-right {
    width: 65%;
    font-size: 0.7em;
  }
  #footer {
    min-height: 0;
    float: left;
  }
}

＆＃13;

<body>
  <?php require_once("scripts/checkBrowser.php"); ?>
    <script>
      document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')

    </script>
    <div id="top-bar">
      <img src="css/images/mini-fc-icon.png" alt="mini-logo" />
      <div id="top-bar-options">
        <a href="register.php">Register</a>
        <a href="myaccount.php">My Account</a>
        <a href="logout.php">Log out</a>
      </div>
      <div id="fc"><span><b>FC</b></span></div>
    </div>
    <nav>
      <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="login.php">Login</a></li>
        <li><a href="subscribe.php">Subscribe</a></li>
        <li><a href="about.php">About us!</a></li>
      </ul>
    </nav>
    <div id="outer-body-wrapper">
      <div id="body-title">
        <b>Wecome to FusionCube!</b>
      </div>
      <div id="inner-body-wrapper" style="padding: 0 20%; width: 60%;">
        <div id="big-icon-wrapper"><img src="css/images/large-fc-icon.png" /></div>
        <div id="web-adv-info">
          Why FusionCube?
          <br/> here's a short list to why:
          <ul>
            <li>reason 1</li>
            <li>reason 2</li>
            <li>reason 3</li>
            <li>reason 4</li>
          </ul>
        </div>
      </div>
      <div id="under-inner-body-wrapper">
        register now!
        <br/> already have an account? Log in
      </div>
      <div id="banner">banner</div>
    </div>

    <div id="footer">
      <div id="c-right">Sebastian Marian Zdroana
        <br> csd2550
        <br> M00495434 - Middlesex University</div>
      <div id="c-assistance">
        <a href="contact.php">Contact</a>
        <br>
        <a href="feedback.php">Feedback</a>
      </div>
    </div>
</body>

＆＃13;

＆＃13;

＆＃13;