Question

大家好，来自StackOverflow！

如何防止div在浮动div下面？

＆＃13;

body {
  /* ======================== block ======================== */
  margin: 0;
  padding: 0;
  margin-left: 19%;
  margin-right: 19%;
  /* ======================== colors ======================= */
  background-color: rgb(249, 249, 249);
  /* ======================================================= */
}

div {
  /* ======================== block ======================== */
  margin: 0.5%;
  padding: 1%;
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.3);
  /* ======================== colors ======================= */
  background-color: white;
  color: black;
  /* ======================================================= */
}

#menu {
  /* ======================== block ======================== */
  display: table;
  float: left;
  /* ======================================================= */
}

#menu a {
  /* ======================== block ======================== */
  display: block;
  /* ======================================================= */
}

#footer {
  /* ======================== block ======================== */
  clear: both;
  /* ======================================================= */
}

＆＃13;

<html>

<head>
  <title>Info-Bulle</title>
  <link href='includes/css/index.css' rel='stylesheet' type='text/css' />
</head>

<body>

  <div id='header'>
    <span id='logo'>Info-Bulle</span>
    <span id='catch'>Club d'entraide informatique pour les séniors</span>
  </div>

  <div id='menu'>
    <a href=''><img src='includes/img/house.png' /></a>
    <a href=''><img src='includes/img/journal.png' /></a>
    <a href=''><img src='includes/img/dictionary.png' /></a>
    <a href=''><img src='includes/img/envelope.png' /></a>
    <a href=''><img src='includes/img/question.png' /></a>
    <a href=''><img src='includes/img/open-book.png' /></a>
  </div>
  <div class='p'>
    Bienvenue(s) sur le club d'entraide informatique pour s&eacute;niors appel&eacute; Info-Bulle !
    </br>
    Besoin d'aide ?
    </br>
    Envie d'apprendre l'informatique ? C'est &agrave; ca que sert Info-Bulle.
    </br>
    Si vous ne savez pas comment utiliser ce site, veuillez consulter le <a href=''>manuel d'utilisation</a>.
  </div>


  <div id='footer'>
    Mis en place par le CCAS de M&acirc;con et d&eacute;vellop&eacute; par Sanchez Tanguy.
    </br>
    Toutes les ic&ocirc;nes viennent de <a href='https://www.flaticon.com/'>Flaticon.com</a>.
  </div>

</body>

</html>

＆＃13;

Screenshot

如上图所示，我的div会自动进入浮动的div下面。我尝试在浮动div上使用边距，但它似乎不是以后用途的最佳解决方案。

您是否有任何其他解决方案，而不是在菜单上使用＆＃34; margin-right＆＃34; ？

Answer 1

也许现在是时候用更好的方法来处理你的布局了。以下是flexbox的解决方案：

＆＃13;

body {
  margin: 0 19% 0;
  padding: 0;
  background-color: rgb(249, 249, 249);
  display: flex;
  flex-direction: column;
}

.content {
  display: flex;
  align-items: flex-start;
}

#menu {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

div {
  margin: 1%;
  padding: 1%;
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.3);
  background-color: white;
  color: black;
  box-sizing: border-box;
}

＆＃13;

<div id='header'>
  <span id='logo'>Info-Bulle</span>
  <span id='catch'>Club d'entraide informatique pour les séniors</span>
</div>
<section class="content">
  <div id='menu'>
    <a href=''><img src='https://lorempixel.com/50/50/'></a>
    <a href=''><img src='https://lorempixel.com/40/50/'></a>
    <a href=''><img src='https://lorempixel.com/50/50/'></a>
    <a href=''><img src='https://lorempixel.com/50/40/'></a>
    <a href=''><img src='https://lorempixel.com/50/50/'></a>
    <a href=''><img src='https://lorempixel.com/50/70/'></a>
  </div>
  <div class='p'>
    Bienvenue(s) sur le club d'entraide informatique pour s&eacute;niors appel&eacute; Info-Bulle !
    <br> Besoin d'aide ?
    <br> Envie d'apprendre l'informatique ? C'est &agrave; ca que sert Info-Bulle.
    <br> Si vous ne savez pas comment utiliser ce site, veuillez consulter le <a href=''>manuel d'utilisation</a>.
  </div>
</section>


<div id='footer'>
  Mis en place par le CCAS de M&acirc;con et d&eacute;vellop&eacute; par Sanchez Tanguy.
  <br> Toutes les ic&ocirc;nes viennent de <a href='https://www.flaticon.com/'>Flaticon.com</a>.
</div>

＆＃13;

如何防止div在浮动的div下面

1 个答案: