html - 如何在 html 中制作具有响应行为的不同部分

您好，我是一名正在尝试学习设计的新设计师

老板指出的问题:

我的老板告诉你的布局在语义上是不正确的
行没有正确对齐
没有反应

他建议我:

将其转换为 flexbox，因为内容将动态出现，flexbox 将处理
使其具有响应性，以便保留基于content 的响应能力

问题图片:

*{
    margin: 0;
    padding: 0;
}

html{
    /* font-size: 62.5%; */
}

body{
    box-sizing: border-box;
    background: #ffffff;
    height: 100vh;
    padding: 2px;
    color: #A7A7A7;
}
header.main-header .main-navigation ul.nav{
    /* background: grey; */
    border-bottom:2px solid #E4E4E4;
    display:block;
    /* display:table; */
    width: 100%;
}

header.main-header .main-navigation ul.nav li{
   padding: 6px;
   border-right:1px solid #E4E4E4;
   position: relative;
   display:table-cell;
}
header.main-header .main-navigation ul.nav li::before{
  content: "";
  position: absolute;
}

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

#content_wrapper_search_etl{
    width: 100%;
}

#content_wrapper_search_etl::after{
    content:'';
    display: table;
    clear: both;
}

section{
    display: block;
}

.leftside-search-area{
    width: 13%;
    float: left;
    height: 98vh;
    /* background: green; */
    border-right: 1px solid #E4E4E4; 
}
.leftside-search-area input{
  border-left: none !important;
}

.center-search-area{
    width: 27%;
    float: left;
    height: 98vh;
    /* background: yellow; */
    border-right: 1px solid #E4E4E4;
}
.right-search-area{
    width: 49.3%;
    float: left;
    height: 98vh;
    /* background: orangered; */
}
.right-search-area input::-webkit-input-placeholder { /* Chrome */
    color:#FE8D51;
}
.center-search-area input::-webkit-input-placeholder { /* Chrome */
    color: #A1A1A1;
}
.right-search-area input,.center-search-area input,.leftside-search-area input{
    width: 101%;
    border: none;
    border: 1px solid #E4E4E4;
    border-top: none;
    height: 25px;
    border-right: none;
    outline: none;
    font-family: FontAwesome !important;
}

.vertical-box .box{
    display: flex;
    width: auto;
    height: 200px;
    border-bottom: 1px solid #E4E4E4;
    margin-top: 4px;
}

.vertical-box .box h4{
    font-size: 13px;
    font-weight: 300;
}

.vertical-box .box .tags ul{
   list-style: none;
}

.vertical-box .box .tags ul li{
   display: block;
   padding: 6px;
   background: #E5E5E7;
   margin-top: 19px;
 }

 .vertical-box .box .tags ul li.square{
    display: inline-block;  
    padding: 3px;
  }

.vertical-box .box .tags ul li.round{
    border-radius: 9px;
    padding: 4px 34px;
    font-size: 11px;
}

.vertical-box .box .tags ul li.tag-active{
    background: #FB8D58;
    color: #fff;
}

  <div id="main_container_blz">
      <header class="main-header">
          <nav class="main-navigation">
             <ul class="nav">
                 <li class="active-nav"><i class="fa fa-home"></i> Home</li>
                 <li><i class="fa fa-user"></i> Users</li>
                 <li><i class="fa fa-cog"></i> Settings</li>
             </ul>
          </nav>
      </header>
     <div id="content_wrapper_search_etl">
         <section class="leftside-search-area">
             <input type="search" placeholder="&#xf0b0; FILTER">
             <div class="vertical-box">
                 <div class="box">
                    <h4>File Types</h4>
                    <div class="tags">
                       <ul>
                           <li class="square tag-active"><i class="fa fa-video-camera"></i>
                           </li>
                           <li class="square"><i class="fa fa-music"></i>                           </li>
                           <li class="square"><i class="fa fa-picture-o"></i>                           </li> 
                       </ul>
                    </div>
                 </div>
                 <div class="box">
                   <h4>Date</h4>
                   <div class="tags">
                        <ul>
                            <li class="round tag-active">Today</li>
                            <li class="round">Yesterday</li>
                            <li class="round">Last week</li>
                       </ul>
                    </div>
                 </div>
                 <div class="box">
                     <h4>Status</h4>
                     <div class="tags">
                        <ul>
                            <li class="round">Today</li>
                            <li class="round">Today</li>
                            <li class="round">Today</li>
                         </ul>
                     </div>
                 </div>
             </div>
         </section>
         <section class="center-search-area">
                <input type="search" placeholder="&#xf002;    Search...">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, reiciendis. Officiis necessitatibus maiores labore quaerat ea eum maxime, ratione ut fugit in voluptatibus. Cum amet perspiciatis, quasi quae illum labore?</p>
         </section>
         <section class="right-search-area">
                <input type="search" placeholder="&#xf007;  Dhobi">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ipsum, saepe deleniti modi expedita minus amet doloribus impedit rem deserunt neque necessitatibus sequi nisi facilis harum tempora quae voluptate voluptatibus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi suscipit est modi exercitationem ipsum eaque, laborum iure hic nobis adipisci, magnam alias sit maxime repellat commodi quam! Numquam, repudiandae?</p>
         </section>
     </div>
  </div>

这里是完整的代码(codepen): https://codepen.io/eabangalore/details/NLLRPv/ (请将 View 更改为编辑器并 fork 它)

请帮我提前谢谢

最佳答案

这里有很多工作要做。我会按照它们在您的图片中出现的顺序进行介绍。

重新对齐导航下划线

所选导航下方元素的上边框厚度为 2px。您需要选择导航项的下划线来覆盖该边框。您当前为所选导航项加下划线的方法是使用 border-bottom ，它无法按照您需要的方式重叠。请改用 ::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; 并从其子级中删除 float: left; 一样简单。你已经单独设置了每个 child 的宽度，这不一定需要改变，但正如你上面所说，最好让 flexbox 计算出宽度。我去掉了所有宽度，这使得您的搜索和 Dhobi 面板彼此一样宽。

此外，我认为您可能会发现 min-height 比 height 更好；当您使用 height 时，过滤器面板中的内容会溢出，因此面板边框不会延伸到页面底部。

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

正确对齐输入框

您的输入有点太宽了，一些有趣的边框参数使它看起来与其余的垂直边框不对齐。使输入宽度为 100%，并将除 border-bottom 之外的所有边框设置为 none。这也解决了 flex 溢出的问题。

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

(有点)响应式溢出

要阻止 Filter 面板中的元素溢出，您可以设置 min-width 属性，或者您可以使用 align-self: flex-start; 以 flexboxy 方式进行设置； 但是，这会使您的某些标签文本在标签内换行。要解决此问题，请设置标签的 white-space: nowrap;。最后，您需要添加一些水平填充以将其与边缘隔开一点。

建议:您可能想在 .box CSS 中尝试 flex-direction: column;。

这不是真正的响应式，但它解决了溢出问题。

.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 */
    ...
}

可以在 https://codepen.io/anon/pen/ZMqVVq 找到一支实现上述所有功能的笔

结果:

希望这能解决您遇到的所有显示问题。

关于html - 如何在 html 中制作具有响应行为的不同部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52350415/

html - 如何在 html 中制作具有响应行为的不同部分

重新对齐导航下划线

显示为 flex

正确对齐输入框

(有点)响应式溢出

上一篇：html - 使用纯 CSS 创建形状

下一篇：css - 如何从包括其祖先在内的元素中获取最后一个 child ？