在this page，標題照片不顯示全寬。CSS：寬度爲100％的子元素只有50％寬

#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僅顯示50％左右的#content-wrap寬度。

我加width: 100%;到#content-wrap但問題依然存在。

我確實想保持flex模型。

幫助讚賞。

來源

2016-07-05 Steve

我修改你的問題，包括在問題本身完整的可重複的例子。爲了將來的參考鏈接到外部網站是不夠的，因爲如果問題得到解決（或頁面消失），這個問題將失去一切意義。 –

爲什麼發生這種情況

這是因爲您正在使用Flexbox模型，該模型試圖將元素散佈在同一條線上。有幾種方法可避免此行爲：

允許內容通過將其設置爲`wrap`文本內容來包裝

默認flex-wrap設置爲nowrap將被強制到下一行運行時空間不足。

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

來源

2016-07-05 07:14:53

美麗。謝謝HH。 – Steve

沒問題@Steve，很高興我能幫到你。 –

據我所知，你應該是好去，如果你只是做：

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

}

來源

2016-07-05 06:42:41 Xariez

這絕對會使圖像100％寬，但它下面的文本將在圖像上重疊，並將需要填充至少200px。 –

@TanyaSinha啊，那是真的。沒想到那 – Xariez

#content-wrap { 
    display:flex 
}

這部分代碼創建了問題，因爲柔性屬性指定，相對於項目的長度到同一容器內其餘的柔性物品。從代碼中刪除它，然後檢查

您可以使用：

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

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

這將解決你的問題，你可以使用柔性盒模型也

來源

2016-07-05 06:45:06

謝謝Tanya。我已經使用flex模型構建了模板。是否有解決方法，不涉及刪除'display：flex;'？ – Steve

CSS：寬度爲100％的子元素只有50％寬

回答

爲什麼發生這種情況

允許內容通過將其設置爲wrap文本內容來包裝

變化屈曲方向

相關問題

允許內容通過將其設置爲`wrap`文本內容來包裝