Question

我正在尝试使用flexbox，所以我对它有点新意。无论如何，我正在努力使3个div彼此相邻，我想要一个div上的所有图像和另一个div中的文本。

我正在尝试使用2个div。目前我得到的图像越过2个div而不是只有一个。我做错了什么？我需要使用边距吗？

https://plnkr.co/edit/sqpAWK1h6dECDyM1SaAl?p=preview

<style>
  #parent {
    display: flex;
  }

  #narrow {
    width: 20%;
    background: lightblue;
    /* Just so it's visible */
  }

  #wide {
    width: 20%;
    /* Grow to rest of container */
    background: lightgreen;
    /* Just so it's visible */
  }
</style>


<div id="parent">
  <div id="wide">images) <img class="imageright" src="https://placehold.it/300x200" /></div>
  <div id="narrow">text (200px)
  </div>
</div>

Answer 1

当我理解你的问题时，我试图得到一个答案。我在你的img标签中添加了一个css属性。

<style>
  #parent {
    display: flex-grow;
  }

  #narrow {
    width: 20%;
    background: lightblue;
    /* Just so it's visible */
  }

  #wide {
    width: 20%;
    /* Grow to rest of container */
    background: lightgreen;
    /* Just so it's visible */
  }

  .imageright{
     width:100%; 
  }
  }
</style>


<div id="parent">
  <div id="wide">images) <img class="imageright" src="https://placehold.it/300x200" /></div>
  <div id="narrow">text (200px)
  </div>
</div>

请告诉我这是否符合您的预期。

Answer 2

  #wide {
    width: 20%;
    /* Grow to rest of container */
    background: lightgreen;
    /* Just so it's visible */
  }

你说“成长为容器的剩余部分”，但你没有采取任何措施来实现这一目标。

flex-grow的默认值为0，因此不会增长。如果您希望扩展内容，请将其设置为1。

Flex：图像正在穿过2个div而不是仅出现在1下方

2 个答案: