扩展div以具有响应边界

时间：2016-07-01 04:13:16

标签： javascript html css

我似乎无法使其正常运作。

我想扩展右侧（.right-line）和左侧（.left-line）侧的边框以到达屏幕的整个侧面。我试过玩宽度和最大宽度。但不知道如何让它发挥作用。

http://codepen.io/Meds/pen/pbPdJp 

<nav class="header">
<div class="nav-title">
    <div class="left-container">
        <div class="left-line">APPAREL</div>
    </div>
    <div class="second-line">

        <div class="nav-items logo"></div>

        <div class="bottom-three-group">
            <div class="skew-left">OVERTURE</div> 
            <div class="overture-title">OVERTURE APPAREL</div> 
            <div class="skew-right">APPAREL</div>
        </div>
    </div>
    <div class="right-line">OVERTURE</div>
    </div> 
</nav>

任何帮助都将不胜感激。

5 个答案:

答案 0 :(得分：0)

试试这个，将此更改添加到您的代码中。

body{
margin:0;
}

.left-container {
    width: 44%;
}

答案 1 :(得分：0)

＆＃13;
＆＃13; 
body {
  margin: 0;
}
.header {
  height: 99px;
  width: 100%;
  position: relative;
  background-color: white;
  overflow: hidden;
  padding-bottom: 10px;
  z-index: 1;
}

.overture-title {
  text-align: center;
  width: 123px;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  margin: 0 auto;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  display: inline-block;
  font-family: 'Roboto';
  background-color: white;
  transform: translateY(-4px);
}

.slant {
  transform: skew(-11deg);
}

.skew-left {
  width: 50px;
  border-top: 2px solid black;
  display: inline-block;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  transform: skew(0, 18deg) translateY(-12px);
  font-family: 'Roboto';
  background-color: white;
}

.skew-right {
  width: 50px;
  border-top: 2px solid black;
  display: inline-block;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  transform: skew(0, -18deg) translateY(-12px);
  font-family: 'Roboto';
  background-color: white;
}

.left-line {
  width: 9999px;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  color: white;
  font-family: 'Roboto';
  background-color: white;
  position: absolute;
  left: 100%;
  bottom: 20px;
}

.second-line {
  display: inline-block;
  position: relative;
  z-index: 3; /* The main logo */
}

.bottom-three-group {
  font-size: 0px;
  white-space: nowrap;
}

.right-line {
  width: 9999px;
  border-top: 2px solid black;
  position: absolute;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  color: white;
  font-family: 'Roboto';
  background-color: white;
  right: 100%;
  bottom: 20px;
}

.nav-items {
  display: inline-block;
}

.nav-title {
  font-size: 0;
  text-align: center;
  width: 100%;
} 

.logo {
  height: 90px;
  width: 90px;
}
＆＃13; 
<nav class="header">
  <div class="nav-title">
    <div class="second-line">
      <div class="left-line">APPAREL</div>

      <div class="nav-items logo"></div>

      <div class="bottom-three-group">
        <div class="skew-left">OVERTURE</div> 
        <div class="overture-title">OVERTURE APPAREL</div> 
        <div class="skew-right">APPAREL</div>
      </div>
      <div class="right-line">OVERTURE</div>
    </div>
  </div> 
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

以下是使用flexbox，

解决问题的方法

http://codepen.io/anon/pen/YWVEkX

我已将以下类应用于左右容器，

.lines {
  flex: 1 50%;
  margin-top: 90px;
}

并为.nav-title

启用了flex 
.nav-title {
  ...
  display: flex;
  flex-flow: row no-wrap;
}

最后，去除身体边缘有助于到达边缘，

body {
  margin: 0;
}

答案 3 :(得分：0)

尝试使用这样的方法，我添加了新的HTML，并使用了一些样式。请仔细删除不需要的样式，

HTML，

<nav class="header">
<div class="nav-title">
    <div class="left-container">
        <div class="left-line">APPAREL</div>
    </div>
    <div class="second-line">

        <div class="nav-items logo"></div>

        <div class="bottom-three-group">
            <div class="skew-left">OVERTURE</div> 
            <div class="overture-title">OVERTURE APPAREL</div> 
            <div class="skew-right">APPAREL</div>
        </div>
    </div>
    <div class="right-line">OVERTURE</div>
    </div> 
</nav>
<div class="border-line">
<div class="cover-area">Cover Area</div>
<div class="second-line white-background">
    <div class="nav-items logo"></div>
    <div class="bottom-three-group">
        <div class="skew-left">OVERTURE</div> 
        <div class="overture-title">OVERTURE APPAREL</div> 
        <div class="skew-right">APPAREL</div>
    </div>
</div>
</div>

CSS，

.header {
   height: 99px;
   width: 100%;
   position: relative;
   background-color: white;
   z-index: 1;
}
.overture-title {
  text-align: center;
  width: 123px;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  margin: 0 auto;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  display: inline-block;
  font-family: 'Roboto';
  background-color: white;
  transform: translateY(-4px);
}
.slant {
   transform: skew(-11deg);
}
.skew-left {
  width: 50px;
  border-top: 2px solid black;
  display: inline-block;
  border-bottom: 2px solid black;
  color: white;
  font-size: 11px;
  padding-top: 1px;
  padding-bottom: 1px;
  transform: skew(0, 18deg) translateY(-12px);
  font-family: 'Roboto';
  background-color: white;
}
.skew-right {
     width: 50px;
    border-top: 2px solid black;
     display: inline-block;
    border-bottom: 2px solid black;
    color: white;
    font-size: 11px;
    padding-top: 1px;
    padding-bottom: 1px;
    transform: skew(0, -18deg) translateY(-12px);
    font-family: 'Roboto';
    background-color: white;
}
    .left-line {
       width: 100%;
       border-top: 2px solid black;
      /*display: inline-block;*/
      border-bottom: 2px solid black;
      color: white;
      font-size: 11px;
      padding-top: 1px;
      padding-bottom: 1px;
      color: white;
      font-family: 'Roboto';
      background-color: white;
      transform: translateY(-20px);
 }
 .second-line {
   display: inline-block;
   position: relative;
   z-index: 3; /* The main logo */
}
.bottom-three-group {
   font-size: 0px;
   white-space: nowrap;
}
.right-line {
   width: 35%;
   border-top: 2px solid black;
   display: inline-block;
   border-bottom: 2px solid black;
   color: white;
   font-size: 11px;
   padding-top: 1px;
   padding-bottom: 1px;
   color: white;
   font-family: 'Roboto';
   /*max-width: 100%;*/
   background-color: white;
   transform: translateY(-20px);
}
   .nav-items {
    display: inline-block;
 }
 .nav-title {
    font-size: 0;
    text-align: center;
    width: 100%;
 }
 .logo {
    height: 90px;
    width: 90px;
 }
 .left-container {
    width: 35%;
    display: inline-block;
    font-size: 11px;
 }
 .border-line{
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    margin-top: 60px;
    height: 14px;
   position: relative;
 }
  .white-background{
    margin: 0 auto;
    width: 225px;
    margin-top: 0px;
    background-color: #fff;
    z-index: 999999;
    position: absolute;
    top: 18px;
    left: 0;
    height: -14px;
    right: 0;
}
 .white-background .logo{
    height: auto;
 }
 .cover-area{
   width: 221px;
   margin: 0 auto;
   color: #fff;
   background-color: #fff;
   position: absolute;
   left: 0;
   right: 0;
   top: -2;
 }

答案 4 :(得分：0)

这是一个position: absolute的解决方案，用于两侧的线条，并使用margin-left和margin-right在偏斜的线条和标题的中心留出空间。

jsFiddle

HTML：

<div class="header">
  <div class="side-line left"></div>
  <div class="side-line right"></div>

  <div class="center-lines">
    <div class="skew-line left"></div>
    <div class="center-title">OVERTURE APPAREL</div>
    <div class="skew-line right"></div>
  </div>
</div>

CSS：

.header {
  position: relative;
  overflow: hidden;
  height: 50px;
  width: 100%;
}

.side-line {
  background-color: white;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  height: 12px;
  position: absolute;
  width: 50%;
}

.side-line.left {
  margin-right: 150px;
  right: 50%;
  top: 0;
}

.side-line.right {
  left: 50%;
  margin-left: 150px;
  top: 0;
}

.center-lines {
  font-size: 0;
  margin: 0 auto;
  width: 300px;
}

.skew-line {
  background-color: white;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  display: inline-block;
  height: 12px;
  width: 50px;
}

.skew-line.left {
  transform: skew(0, 18deg) translateY(8px);
}

.skew-line.right {
  transform: skew(0, -18deg) translateY(8px);
}

.center-title {
  background-color: white;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  display: inline-block;
  font-size: 11px;
  height: 12px;
  text-align: center;
  transform: translateY(12px);
  width: 200px;
}
相关问题
最新问题