divを拡張して応答する境界を持つ

Question

これは正しく動作するようには見えません。

右側（.right-line）と左側（.left-line）の境界線を画面の全面に広げたいと思います。 Iveは幅と最大幅で遊んでみました。しかし、それを働かせる方法がわからない。

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> 

任意の助けいただければ幸いです。

Answer 1

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

<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>

Answer 2

この変更をコードに追加してください。

body{ 
margin:0; 
} 

.left-container { 
    width: 44%; 
} 

Answer 3

ここで、flexboxを使用して、それを解決する方法です

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

私は左と右のコンテナの両方に次のクラスを適用した、

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

そして.nav-title

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

最終、身体のマージンが端に到達するために役立ち、

body { 
    margin: 0; 
} 

Answer 4

は次のように使用してみてください削除、私は新しいHTMLを追加した、と使用しているため、フレックス有効あなたのスタイリングの一部。ここで

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

Answer 5

は、両側のラインのためのposition: absoluteとソリューションであり、作るためにmargin-leftとmargin-rightを使用して、

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、必要とされていないスタイリング慎重に取り外してください。中心には歪んだ線とタイトルのスペースがあります。

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