Question

我花了好几个小时试图找出为什么两个div只会在使用弹性框保持在同一行时，在标题类的段落中的html中添加换行符或者设置宽度以便必须定义我想要的是对于肖像div，设置宽度为300px，bio为尺寸以填充剩余尺寸。

CSS

.intro {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between; }

.bio {
  order: 1;
  flex-grow: 1; }

.bio p {
  width: 50%;
  margin: 0;
  padding: 0; }

.portrait {
  order: 2;
  width: 300px; }

.portrait img {
  width: 100%;
  border: 30px solid white; }

HTML

  <div class="intro">
      <div class="portrait">
        <img src="assets/img/me.jpg" alt="Nicola Sansom">
      </div>
      <div class="bio">
        <h1>Header</h1>
        <p>Content</p>
           <div class="well-versed">
           <b>1 Col</b>
           </div>
      </div>
  </div>

Answer 1

这是你想要的吗？我想我不理解你的问题

＆＃13;

.intro {
  display: flex;
  /*flex-flow: row wrap;*/
  align-items: center;
 /* justify-content: space-between;*/ }

.bio {
  width:100%;
  background-color:pink;
  order: 1;
  /*flex-grow: 1; */}

.bio p {
  width: 50%;
  margin: 0;
  padding: 0; }

.portrait {
 order: 2;
  width: 300px; }

.portrait img {
  width: 100%;
  border: 30px solid white; }

＆＃13;

 <div class="intro">
      <div class="portrait">
        <img src="assets/img/me.jpg" alt="Nicola Sansom">
      </div>
      <div class="bio">
        <h1>Header</h1>
        <p>Content</p>
           <div class="well-versed">
           <b>1 Col</b>
           </div>
      </div>
  </div>

＆＃13;

如何在不使用换行符的情况下使用流量增长和行换行时在一行中获取两个项目？

1 个答案: