如何用html中的响应行为制作不同的部分

时间：2018-09-16 02:13:45

标签： html css html5 css3 flexbox

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

老板指出的问题

  1. 我的老板告诉您布局在语义上不正确
  2. 线未正确对齐
  3. 没有反应

他建议我

  1. 将其转换为flexbox，因为内容将动态生成，flexbox将处理
  2. 使其具有响应能力，应基于content保持响应能力

问题图片：

enter image description here 

*{
    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/（请将视图更改为编辑器并将其派生）

请提前帮助我

2 个答案:

答案 0 :(得分：2)

这里有很多工作要做。我将按照它们在您的图片中显示的顺序进行排序。

重新调整导航下划线

所选导航下方的元素的顶部边框的厚度为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;一样简单。您已经分别设置了每个子项的宽度，这不一定需要更改，但是正如您上面所说，最好让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％，并将none以外的所有边界设置为border-bottom。这也解决了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;
}

（有点）响应式溢出

要阻止“过滤器”面板中的元素溢出，可以设置min-width属性，也可以使用align-self: flex-start;以flexboxy的方式进行设置，但这可以使部分标签文本换行标签。要解决该问题，请设置标签的white-space: nowrap;。最后，您需要添加一些水平填充，以使其与边缘之间的距离很小。

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

这不是真正的响应能力，但可以解决溢出问题。

.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

处发现了一支由您制成的可实现以上所有功能的笔

结果：

Result

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

答案 1 :(得分：1)

提高响应速度

  

我建议您使用CSS Grid Layout来解决您的问题   问题。

只需将display: grid添加到您的内容包装器中，然后指定每列的模板大小，例如：

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

并删除搜索区域中的width：.leftside-search-area，.center-search-area和.right-search-area。

修复边界对齐

在搜索width中将100%设置为101%而不是input。保留border: none;并仅设置border-bottom属性以修复边界对齐：

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

修复有效的nav下划线

删除当前样式：

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

并使用伪元素代替，例如::before：

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

叉笔：https://codepen.io/knekk/pen/pOQxrQ?editors=1100

相关问题
最新问题