时间戳

首页 > 解决方案 > CSS 和页面大小调整

html - CSS 和页面大小调整

问题描述

我正在设置一个带有顶部的简单页面，下面的部分分为垂直部分。

左侧部分包含一个站点菜单，右侧部分包含措辞，中间是左右之间的空格（不需要？）。

我的问题：

  1. 当页面水平调整大小时，右侧部分在左侧移动，完全遮盖了站点菜单。

  2. 右侧部分中的文本环绕到站点菜单下方的左侧。我希望右侧部分中的文本保留在右侧部分中。

菜单被遮挡

.top {
  width: auto;
  height: auto;
  padding-bottom: 50px;
  background-color: white;
}


.ileft {
    width: 15%;
    float: left;
    background-color: white;
}

.imiddle {
    width: 5%;
    float: left;
    background-color: white;
}

.iright {
   width: 80%;
   float: left
   margin-left: 30px;
   background-color: white;
}

标签： htmlcss

解决方案

请按照其他人所说的那样使用flex或grid创建此布局。

但是，如果您出于某种原因想要使用此设置，则代码的问题是您在选择器中的属性;之后缺少一个，您需要将宽度设置为以便它考虑该属性（或仅删除）。float.irightcalc(80% - 30px)margin-leftmargin-left

/* Added so you can see the output better */
div {
  height: 40px;
}

.top {
  width: auto;
  height: auto;
  padding-bottom: 50px;
  background-color: red;
}

.ileft {
    width: 15%;
    float: left;
    background-color: blue;
}

.imiddle {
    width: 5%;
    float: left;
    background-color: purple;
}

.iright {
   width: calc(80% - 30px);
   float: left;
   padding: left;
   margin-left: 30px;
   background-color: yellow;
}
<div class="top">Top</div>
<div class="ileft">Left</div>
<div class="imiddle">M</div>
<div class="iright">Right</div>

请按照其他人所说的那样使用flex或grid创建此布局。

推荐阅读