CSS：子元素，宽度为100％，宽度仅为50％

时间：2016-07-05 06:38:09

标签： css flexbox

在this page，标题照片未显示全宽。

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

但是，.image-header仅显示#content-wrap宽度的50％左右。

我已将width: 100%;添加到#content-wrap，但问题仍然存在。

我确实想保留flex模型。

帮助表示赞赏。

3 个答案:

答案 0 :(得分：1)

为什么会这样？

这是因为您正在使用flexbox模型，该模型试图将元素分布在同一行上。有两种方法可以避免这种行为：

允许内容换行

默认情况下，flex-wrap设置为nowrap，设置为wrap，文本内容将在空间不足时强制进入下一行。

#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设置为row，设置为column，内容将从上到下而不是从左到右弯曲。

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

答案 1 :(得分：0)

据我所知，如果你这样做，你应该很高兴：

theRecyclerView.setItemAnimator(new DefaultItemAnimator() {
        @Override
        public boolean canReuseUpdatedViewHolder(@NonNull RecyclerView.ViewHolder viewHolder) {
            return true;
        }

        @Override
        public boolean canReuseUpdatedViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, @NonNull List<Object> payloads) {
            return true;
        }
    });

答案 2 :(得分：0)

#content-wrap {
  display:flex 
}

这部分代码会产生问题，因为flex属性指定项目的长度，相对于同一容器内其他灵活项目的长度。从代码中删除它，然后检查它

您可以使用：

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

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

这将解决您的问题，您也可以使用弹性箱模型

相关问题
最新问题