CSS：幅100％の子要素の幅がわずか50％

Question

this pageの場合、ヘッダー写真は全幅を表示しません。

#wrap { 
 
    width: 990px; 
 
} 
 
#content-wrap { 
 
    display: flex; 
 
} 
 
.image-header { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.image-header img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
}

<div id="wrap"> 
 
    <div id="content-wrap" class="fluid clearfix" data-content="content"> 
 
    <!-- /#start content-wrap --> 
 
    <div class="image-header"> 
 
     <img src="https://staging.orsgroup.com.au/eapportal/wp-content/uploads/sites/2/2016/07/ORS-Internals-960x211-EmployServOccu21.jpg" alt="Home Page" title="Home Page"> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="container"> 
 
     <div id="content" class="sixteen columns"> 
 
     <section class="post-9 page type-page status-publish hentry"> 
 

 
      <h1>Home Page</h1> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis tortor vel diam volutpat luctus. Proin placerat nisl nulla, in mattis ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae enim 
 
      vel nibh hendrerit dignissim a et ante. Mauris eget tempus nunc. Donec dignissim elit sed ullamcorper semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, risus eu varius lacinia, diam tortor volutpat ipsum, 
 
      eu luctus neque massa quis leo. Phasellus blandit pellentesque justo non ornare. Cras et elit sit amet quam consequat viverra vel a diam. Pellentesque rutrum, dolor sit amet condimentum dapibus, lorem est dapibus orci, a congue ante ante ac 
 
      lectus. Donec maximus pretium venenatis. Cras ex leo, pellentesque in libero sit amet, auctor congue sapien. Aliquam nec mi commodo ipsum sagittis tincidunt. Vestibulum sollicitudin laoreet eros vel finibus. Integer accumsan consectetur neque 
 
      eget sodales.</p> 
 
     </section> 
 
     <!-- #post-## --> 
 
     <!-- You can start editing here. --> 
 
     </div> 
 
     <!-- /#content-wrap --> 
 
     <div class="clear"></div> 
 
    </div> 
 
    </div> 
 
</div>

しかし、.image-headerのみ#content-wrapの幅の約50％を表示しています。

width: 100%;~を追加しましたが、問題は残ります。

私はフレックスモデルを保ちたいと思います。

ヘルプありがとうございます。

Answer 1

を使用することができ、これは

これが起こっているのはなぜあなたが同じ行に要素を広げようとしているflexboxモデルを使用しているからです。

を許可、それは実行時に内容が次の行に強制されますwrapにテキストコンテンツを、これを設定することで、デフォルトflex-wrapnowrapに設定されていることで

をラップする：あなたはこの動作を回避することができますいくつかの方法があります。スペースから。

#wrap { 
 
    width: 990px; 
 
} 
 
#content-wrap { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.image-header { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.image-header img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
}

<div id="wrap"> 
 
    <div id="content-wrap" class="fluid clearfix" data-content="content"> 
 
    <!-- /#start content-wrap --> 
 
    <div class="image-header"> 
 
     <img src="https://staging.orsgroup.com.au/eapportal/wp-content/uploads/sites/2/2016/07/ORS-Internals-960x211-EmployServOccu21.jpg" alt="Home Page" title="Home Page"> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="container"> 
 
     <div id="content" class="sixteen columns"> 
 
     <section class="post-9 page type-page status-publish hentry"> 
 

 
      <h1>Home Page</h1> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis tortor vel diam volutpat luctus. Proin placerat nisl nulla, in mattis ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae enim 
 
      vel nibh hendrerit dignissim a et ante. Mauris eget tempus nunc. Donec dignissim elit sed ullamcorper semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, risus eu varius lacinia, diam tortor volutpat ipsum, 
 
      eu luctus neque massa quis leo. Phasellus blandit pellentesque justo non ornare. Cras et elit sit amet quam consequat viverra vel a diam. Pellentesque rutrum, dolor sit amet condimentum dapibus, lorem est dapibus orci, a congue ante ante ac 
 
      lectus. Donec maximus pretium venenatis. Cras ex leo, pellentesque in libero sit amet, auctor congue sapien. Aliquam nec mi commodo ipsum sagittis tincidunt. Vestibulum sollicitudin laoreet eros vel finibus. Integer accumsan consectetur neque 
 
      eget sodales.</p> 
 
     </section> 
 
     <!-- #post-## --> 
 
     <!-- You can start editing here. --> 
 
     </div> 
 
     <!-- /#content-wrap --> 
 
     <div class="clear"></div> 
 
    </div> 
 
    </div> 
 
</div>

変更デフォルトflex-directionことで、フレックス方向

は、コンテンツが上下に曲げられた代わりの左から右になりますcolumnにこれを設定することにより、rowに設定されています。

#wrap { 
 
    width: 990px; 
 
} 
 
#content-wrap { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.image-header { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.image-header img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
}

<div id="wrap"> 
 
    <div id="content-wrap" class="fluid clearfix" data-content="content"> 
 
    <!-- /#start content-wrap --> 
 
    <div class="image-header"> 
 
     <img src="https://staging.orsgroup.com.au/eapportal/wp-content/uploads/sites/2/2016/07/ORS-Internals-960x211-EmployServOccu21.jpg" alt="Home Page" title="Home Page"> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="container"> 
 
     <div id="content" class="sixteen columns"> 
 
     <section class="post-9 page type-page status-publish hentry"> 
 

 
      <h1>Home Page</h1> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis tortor vel diam volutpat luctus. Proin placerat nisl nulla, in mattis ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae enim 
 
      vel nibh hendrerit dignissim a et ante. Mauris eget tempus nunc. Donec dignissim elit sed ullamcorper semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, risus eu varius lacinia, diam tortor volutpat ipsum, 
 
      eu luctus neque massa quis leo. Phasellus blandit pellentesque justo non ornare. Cras et elit sit amet quam consequat viverra vel a diam. Pellentesque rutrum, dolor sit amet condimentum dapibus, lorem est dapibus orci, a congue ante ante ac 
 
      lectus. Donec maximus pretium venenatis. Cras ex leo, pellentesque in libero sit amet, auctor congue sapien. Aliquam nec mi commodo ipsum sagittis tincidunt. Vestibulum sollicitudin laoreet eros vel finibus. Integer accumsan consectetur neque 
 
      eget sodales.</p> 
 
     </section> 
 
     <!-- #post-## --> 
 
     <!-- You can start editing here. --> 
 
     </div> 
 
     <!-- /#content-wrap --> 
 
     <div class="clear"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私の知る限りでは、あなたはあなただけ行う場合行くに良いことがあります：フレックスプロパティは、相対的な項目の長さを指定しているので

.image-header { 

    width: 100% !important; 
    position: absolute; /* If it works without this, remove it. If it doesn't, you'll need to add a margin to not make the text go under it */ 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto; 

} 

Answer 3

#content-wrap { 
    display:flex 
} 

コードのこの部分が問題を作成します同じコンテナ内の柔軟なアイテムの残りの部分に移動します。あなたのコードからそれを削除してご確認くださいそれが

あなたは使用することができます。

#content-wrap { 
    -webkit-flex-flow: row wrap; 
} 

.image-header,.container { 
    -webkit-flex: 1 100%; 
} 

これはあなたの問題を解決し、あなたはまた、フレックスボックスモデル