如何防止 div 进入浮动 div 下方 [英] How to prevent divs from going underneath floated divs

查看：26
本文介绍了如何防止 div 进入浮动 div 下方的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好，来自 StackOverflow 的人！

如何防止 div 位于浮动 div 下方?

body {/* ======================== 块 ========================= */边距:0；填充:0；左边距:19%；右边距:19%；/* ======================== 颜色 ========================*/背景颜色:rgb(249, 249, 249);/* ======================================================== */}div {/* ======================== 块 ========================= */保证金:0.5%；填充:1%；box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.3);/* ======================== 颜色 ========================*/背景颜色:白色；颜色:黑色;/* ======================================================== */}#菜单 {/* ======================== 块 ========================= */显示:表；向左飘浮;/* ======================================================== */}#菜单一个{/* ======================== 块 ========================= */显示:块；/* ======================================================== */}#页脚{/* ======================== 块 ========================= */清楚:两者；/* ======================================================== */}

<头><title>Info-Bulle</title><link href='includes/css/index.css' rel='stylesheet' type='text/css'/><身体><div id='header'><span id='logo'>Info-Bulle</span><span id='catch'>Club d'entraide informatique pour les Séniors</span>

<div id='菜单'><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>

Bienvenue(s) sur le club d'entraide informatique pour séniors appelé信息牛！</br>在 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 id='footer'>CCAS de M&acirc;con et d&eacute;vellopé与桑切斯·坦吉相提并论.</br>Toutes les ic&ocirc;nes viennent de <a href='https://www.flaticon.com/'>Flaticon.com</a>.

</html>

截图

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

除了使用菜单上的右边距"之外，您还有其他解决方案吗?

解决方案

也许是时候使用更好的方法来处理您的布局了.这是一个使用 flexbox 的解决方案:

body {保证金:0 19% 0；填充:0；背景颜色:rgb(249, 249, 249);显示:弹性；弹性方向:列；}.内容 {显示:弹性；对齐项目:flex-start；}#菜单 {显示:弹性；弹性方向:列；}图像{最大宽度:100%；}div {保证金:1%；填充:1%；box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.3);背景颜色:白色；颜色:黑色;box-sizing: 边框框；}

<section class="内容"><div id='菜单'><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>

Bienvenue(s) sur le club d'entraide informatique pour séniors appelé信息牛！<br>在 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 id='footer'>CCAS de M&acirc;con et d&eacute;vellopé与桑切斯·坦吉相提并论.<br>Toutes les ic&ocirc;nes viennent de <a href='https://www.flaticon.com/'>Flaticon.com</a>.

Hi everyone from StackOverflow !

How can I prevent divs from going underneath floated divs ?

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;
  /* ======================================================= */
}

<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>

Screenshot

As shown in the image above, my divs are automatically going underneath the floated one. I tried to use margins on the floated div but it doesn't seem to be the best solution for later uses.

Do you have any other solution rather than using a "margin-right on the menu" ?

解决方案

Maybe it's time to use a better way to handle your layout. Here is a solution with flexbox:

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

<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>

这篇关于如何防止 div 进入浮动 div 下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆