Question

好的，使用flex将图像（紫色）和内容（黄色）并排排列。然而，我之间有额外的空间，并将图像扔到右边。

应该是：

图片应位于黄色div旁边的蓝色div中
黄色div应为60％宽度（这些是柔性物品）

我检查了填充和边距，但它对我没用。有什么想法吗？

这是html

CSS

replace

Answer 1

由于display: flex使其直接后代变为项目，因此只有div包裹成为一个p / img。

为了使这项工作成功，并且由于img在处理弹性项目时表现不正常，请将div包装器移动到img，它将按预期流动。

我还将width: 50%更改为flex-basis: 60%，因此黄色元素变为60％，并将flex-grow: 1添加到div包装器中，因此它占用剩余的空间。

根据评论更新

更改为外部和内部Flexbox包装，因此按钮位于黄色元素下方，图像位于右侧

＆＃13;

.sec-1 h2 {
  font-size: 1.2em;
  background-color: green;
}

.sec-1 p {
  margin: 0;
  font-size: 1.1em;
  background-color: yellow;
}

.sec-1 .phone-img {
  position: relative;
  top: 10%;
  left: 30%;
  background-color: purple;
}

.flex-box-outer {
  display: flex;
}
.flex-box-outer > div {
  flex-grow: 1;
}
.flex-box-inner {
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

＆＃13;

<div class="sec-1">
  <h2>Introducing 'Keeva' world's smartest assistant.</h2>
  <div class="flex-box-outer">  
    <div class="flex-box-inner">
      <p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p>
    <!-- Download Buttons -->
      <div>
        <img class="download-btns" src="http://placehold.it/100x50/?text=playstore">
        <img class="download-btns" src="http://placehold.it/100x50/?text=iphone">
      </div>
    </div>
    
  <!-- Phone 0 image -->
    <div>
      <img class="phone-img" src="http://placehold.it/100x50/?text=iphone cut" alt="phone image">
    </div>
  </div>
</div>

＆＃13;

柔性物品并排排列（即间隔开）？

1 个答案: