Question

我无法将导航按钮折叠成一个列并按特定顺序。

我在使用导航标签和两个徽标（位于同一行）时无法在屏幕缩小时溢出容器。为了帮助更好地理解，我将特定的行以黄色突出显示，以及以1px黑色边框突出显示的容器。

我无法获取公园的背景图片以填满整个行，就在容器的边缘。截至目前，它有很大的利润空间。我一直试图解决这些问题几个小时！以下是我的密码笔的链接：https://codepen.io/IDCoder/pen/rGWeEE?editors=1100。此外，这是我用来构建我的弹性框语法的代码笔：https://codepen.io/Paulie-D/pen/gpqmaR?editors=1100。 我将此代码笔的相应html和css代码放在我的代码笔代码下面。在此先感谢您的帮助！干杯！

.container-fluid{
border: 1px solid #000000;
overflow: hidden;
}


.row-one{
display: flex;
}


.Logo-one{
padding: 3px;
}

.Logo-two{
padding: 3px;
}


 ul.navigation{
 flex:1;
 justify-content:space-between; 
 font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
 margin: 25px;
 padding: 10px;
 float: right;
 text-align center;
 /*border: 1px solid green;*/
 /*overflow: hidden;*/  
}




ul.navigation:nth-child(LOG IN){
  order: 1;
}

ul.navigation:nth-child(BUY A HOME){
  order: 2;
}

ul.navigation:nth-child(SELL A HOME){
  order: 3;
}

ul.navigation:nth-child(CONTACT US){
  order: 4;
}



@media screen and (max-width: 100%){
.navigation{
flex-direction: column;
}

  ul.navigation:nth-child(BUY A HOME){
    order: 1;
  }

  ul.navigation:nth-child(SELL A HOME){
    order: 2;
  }

  ul.navigation:nth-child(CONTACT US){
    order: 3;
  }

  ul.navigation:nth-child(LOG IN){
    order: 4;
  }

}


.navigation li {
  display: inline-block;  
}

.navigation a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
}
.navigation a:hover {
  background: #314b0;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
  border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
  border-right: 0;
  border-radius: 0 4px 4px 0;
}



.row.two{
background-image: url(https://s26.postimg.org/j1h75tfs9/Hyde_Park_Chicago_Harold_Washington_Park.jpg);
    background-position: center;
    background-repeat: no-repeat;
    max-width: 1600;
        height: 550px;
        margin: auto;  
}

 .floater.box{
    background-color: white;
    border-radius: 10px;
    opacity: .45;
    max-width: 85%;
    height: 200px;
    position: absolute;
    top:50%;
    left: 0;
    right: 0;
    margin: auto;
}


<html>
  <head>
    <title>Ms.Jane Equities Management Corp</title>
  </head>  
      <body> 
        <div class="container-fluid">

          <!-- Top Box -->
          <div class="row-one" style="background-color:yellow">
            <div class="Logo-one" >
              <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/>
            </div>
            <div class="Logo-two">
              <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/> 
            </div>
            <div class ="navigation buttons">                       
                  <ul class="navigation">
                    <li id="NAV-ONE"><a href="#">LOG IN</a></li>
                    <li id="NAV-TWO"><a href="#">BUY A HOME</a></li>
                    <li id="NAV-THREE"><a href="#">SELL A HOME</a></li>
                    <li id="NAV-FOUR"><a href="#">CONTACT US</a></li>
                 </ul>           
            </div>
          </div>

          <!-- Middle Box -->
          <div class="row two">
            <div class="col-md-12">
              <div class="floater box">

              </div>
            </div>
          </div>

          <!-- Bottom Box -->
          <div class="row three">
          </div>

        </div>
      </body>
<html>

下面是代码笔中的代码，我从中获取了我的弹性框语法：

CSS代码：

.wrap {
  display: flex;
}

.box {
  height: 150px;
  border: 1px solid green;
  flex: 1;
  margin: 25px;
  text-align: center;
  line-height: 150px;
  font-size: 36px;
}

.box:first-child {
  order: 1;
}

.box:nth-child(2) {
  order: 2;
}

.box:nth-child(3) {
  order: 3;
}

@media screen and (max-width:760px) {
  .wrap {
    flex-direction: column;
  }
  .box:nth-child(2) {
    order: 3;
  }
  .box:nth-child(3) {
    order: 2;
  }
}

HTML代码：

<div class="wrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

无法使用Flex-box代码

0 个答案: