1. 首页
  2. 问答
  3. CSS：宽度为100％的子元素只有50％宽

CSS：宽度为100％的子元素只有50％宽

2016-07-05 135 views
0

在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

+1

我修改你的问题，包括在问题本身完整的可重复的例子。为了将来的参考链接到外部网站是不够的，因为如果问题得到解决（或页面消失），这个问题将失去一切意义。 –

回答

1

为什么发生这种情况

这是因为您正在使用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

+0

美丽。谢谢HH。 – Steve

+0

没问题@Steve，很高兴我能帮到你。 –

0

据我所知，你应该是好去，如果你只是做：

.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

+0

这绝对会使图像100％宽，但它下面的文本将在图像上重叠，并将需要填充至少200px。 –

+0

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

0 
#content-wrap { 
    display:flex 
}

这部分代码创建了问题，因为柔性属性指定，相对于项目的长度到同一容器内其余的柔性物品。从代码中删除它，然后检查

您可以使用：

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

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

这将解决你的问题，你可以使用柔性盒模型也

来源

2016-07-05 06:45:06

+0

谢谢Tanya。我已经使用flex模型构建了模板。是否有解决方法，不涉及删除'display：flex;'？ – Steve

相关问题

 相关问题