如何在html中创建具有响应行为的不同部分

嗨，我是一个非常新的设计师，试图学习设计

老板指出的问题：

我老板说你的布局在语义上不正确

线没有正确对齐

不响应

他建议我：

将其转换为

flexbox

，因为内容将动态出现，

flexbox

wll句柄

使其具有响应性，以便基于

内容

应保留响应性

问题图片：

*{
保证金：0；
填充：0；
}
html{
/*字体大小：62.5%*/
}
身体{
框大小：边框框；
背景：#ffffff；
高度：100vh；
填充：2px；
颜色：#A7A7；
}
标题。主标题。主导航ul.nav{
/*背景：灰色*/
边框底部：2个实心#e4；
显示：块；
/*显示：表格*/
宽度：100%；
}
header.main-header.main导航ul.nav li{
填充：6px；
右边框：1px实心#e4；
位置：相对位置；
显示：表格单元格；
}
header.main-header.main导航ul.nav li:：之前{
内容：“；
位置：绝对位置；
}
header.main-header.main导航ul.nav li.active-nav{
边框底部：3px实心#F89106；
}
#内容\u包装\u搜索\u etl{
宽度：100%；
}
#内容_包装_搜索_etl:：after{
内容：''；
显示：表格；
明确：两者皆有；
}
部分{
显示：块；
}
.左侧搜索区域{
宽度：13%；
浮动：左；
高度：98vh；
/*背景：绿色*/
右边框：1px实心#e4；
}
.左侧搜索区域输入{
左边界：无！重要；
}
.中心搜索区{
宽度：27%；
浮动：左；
高度：98vh；
/*背景：黄色*/
右边框：1px实心#e4；
}
.右搜索区域{
宽度：49.3%；
浮动：左；
高度：98vh；
/*背景：橙色*/
}
.右搜索区域输入：：-webkit输入占位符{/*Chrome*/
颜色：#FE8D51；
}
.center搜索区域输入：：-webkit输入占位符{/*Chrome*/
颜色：#a1a1；
}
.右侧搜索区域输入、.中间搜索区域输入、.左侧搜索区域输入{
宽度：101%；
边界：无；
边框：1px实心#e4；
边界顶部：无；
高度：25px；
边界权：无；
大纲：无；
字体系列：真棒！重要；
}
.垂直盒子.盒子{
显示器：flex；
宽度：自动；
高度：200px；
边框底部：1px实心#e4；
利润上限：4倍；
}
.立式箱.h4箱{
字体大小：13px；
字体大小：300；
}
.垂直包装箱.包装箱.标签ul{
列表样式：无；
}
.垂直盒.盒.标签ul li{
显示：块；
填充：6px；
背景：#e5e7；
边缘顶端：19像素；
}
.垂直盒子.盒子.标签ul li.square{
显示：内联块；
填充：3倍；
}
.垂直盒.盒.标签ul li.圆形{
边界半径：9px；
填充：4px4px；
字体大小：11px；
}
.垂直框.框.标签ul li.tag-active{
背景#FB8D58；
颜色：#fff；
}

主页
使用者
背景

文件类型






日期

今天
昨天
上周

地位

今天
今天
今天

我的同僚们都是精英。腐败，赖西恩迪斯。这是一种必须的工作场所，它的质量是最高的。兼阿米特透视术，准手术室

Lorem ipsum dolor坐在amet Concertetur，告别精英。同侧肢体运动中，运动速度减去动眼神经阻滞后的运动速度应满足以下必要条件：面部颞侧唇腭裂

Lorem ipsum dolor sit amet，奉献精英。动物的生存是一种自我实践，劳动是一种道德，是一种对共同利益的最大排斥！纽姆库姆，共和国

这里有很多工作要做。我将按照它们出现在您的图像中的顺序进行检查

重新调整导航下划线 选定导航下方元素的上边框的厚度为2px。您需要选定导航项的下划线来覆盖该边框。您当前对所选导航项目加下划线的方法是使用

边框底部

，它不能按您需要的方式重叠。改用

：：after

伪元素

header.main-header .main-navigation ul.nav li.active-nav::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px; /* same thickness as your original border */
    background: #F89106;
    bottom: -2px; /* places it exactly over the below element's top border */
    left: 0;
}

---

显示为flex 要显示为flex，只需将父级设置为

display:flex

并移除

浮动：左从它的子项。您已经分别设置了每个孩子的宽度
#content_wrapper_search_etl{
    width: 100%;
    display: flex; /* key element */
}
.leftside-search-area{ /* no float and no width, same with the other panels */
    min-height: 98vh;
    border-right: 1px solid #E4E4E4; 
}
.center-search-area{
    min-height: 98vh;
    border-right: 1px solid #E4E4E4;
}
.right-search-area{
    min-height: 98vh;
}

.right-search-area input,.center-search-area input,.leftside-search-area input{
    width: 100%; /* not 101% */
    border: none;
    border-bottom: 1px solid #E4E4E4; /* set border-bottom only */
    height: 25px;
    outline: none;
    font-family: FontAwesome !important;
}

.leftside-search-area{
    align-self: flex-start; /* keep width to that of its content */
    min-height: 98vh;
    border-right: 1px solid #E4E4E4;
}
.vertical-box .box{
    white-space: nowrap; /* prevent labels wrapping */
    display: flex;
    padding: 0 10px 0 10px; /* space from horizontal edges */
    ...
}

#content_wrapper_search_etl{
    display: grid;
    grid-template-columns: max-content .5fr 1fr;
    width: 100%;
}

.right-search-area input,.center-search-area input,.leftside-search-area input{
    width: 100%;
    border: none;
    border-bottom: 1px solid #E4E4E4;
    ...
}

header.main-header .main-navigation ul.nav li.active-nav{
    border-bottom: 3px solid #F89106;
}

header.main-header .main-navigation ul.nav li.active-nav::before {
    bottom: -2px;
    left: 0;
    width: 100%;
    border-bottom: 3px solid #F89106;
}