提问者:小点点

如何将弯曲的项目设置为全宽,除了某些?


请查看https://jsfiddle.net/dwgrxo35/19/

我想实现的是:

  • 全角标题,
  • 图像到左边-第一个段落到右边,底部与图像对齐
  • 其余部分正常流动,块为块,内联为内联。

我不能重组HTML,它来自于减价。

它工作,如果我没有短的内容块,但项目3和4扰乱了这种和平。

有什么想法吗?

null

main {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  background-color: aliceblue;
}

main>* {
  margin: 0 1em 1em 0;
  background-color: lightgoldenrodyellow;
}

main>figure:first-of-type {
  flex: 1;
}

main>p:first-of-type {
  flex: 1;
}

figcaption {
  text-align: center;
}
<main>
  <h1>Eine Seite, um den Flow zu flowen</h1>
  <figure>
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fgw3IWyGkC0rsazTi%2F200.gif&f=1&nofb=1">
    <figcaption>1. Das ist 2018 herum.</figcaption>
  </figure>
  <p>2. The President shall have at Least one Representative. In all the other Cases before mentioned, the supreme Court shall have been elected, and he shall have at Least one Representative. Note: Changed by the Eleventh Amendment. To borrow money on the
    credit of the States, and will to the best of my Ability, preserve, protect and defend the Constitution of the United States, reserving to the other House, by which it shall not be suspended, unless when in Cases of Rebellion or Invasion the public
    Safety may require the Opinion in writing, of the Persons voting for and against the United States shall guarantee to every State in which he was elected, be appointed to any Office or public Trust under the Authority of the State where the said Crimes
    shall have the Qualifications requisite for Electors of the most numerous Branch of the land and naval Forces.
  </p>
  <p>3. Kurz.</p>
  <ul>
    <li>4. List</li>
    <li>List</li>
    <li>List</li>
  </ul>
  <figure>
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fgw3IWyGkC0rsazTi%2F200.gif&f=1&nofb=1">
    <figcaption>5. Das ist so 2018 herum.</figcaption>
  </figure>
  <p>6. Als Kreditengagement gelten in diesem Zusammenhang sind die Begriffe „illiquide Sicherheiten“ und „ausserbörsliches Derivat, das nicht ohne Weiteres ersetzt werden kann, gilt für den überwiegenden Teil ihrer Geschäftsaktivitäten über eine IMMZulassung
    verfügen, aber für sich allein nicht aus. Diese Einheit muss die Integrität der zur Durchführung von Nachschussforderungen verwendeten Daten prüfen und sicherstellen, dass sie ihre Anforderungen für das antizyklische Kapitalpolster als den gewichteten
    Durchschnitt der Anforderungen in den Ländern, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die CVARisikokapitalanforderung gegen die CVA aufgerechnet werden. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang
    mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals in voller Höhe abgezogen werden. Ebenso ergibt sich der Betrag, der in Bezug auf Bedienungsrechte von Hypotheken abzuziehen ist, als die Summe sämtlicher Beteiligungspositionen,
    die insgesamt mehr als 10% des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Dementsprechend ergibt sich der Wert der des Aktivums mindern sollte oder falls sie nach einschlägigen Rechnungslegungsstandards auszubuchen wäre.
    Übersteigt die Summe sämtlicher Positionen, die insgesamt mehr als 10% des harten Kernkapitals der Bank (wie oben beschrieben) ausmachen, multipliziert mit dem Risikogewicht versehen werden, das sie als unmittelbares Eigentum der Bank (wie oben beschrieben)
    ausmachen, multipliziert mit dem prozentualen Anteil der gesamten Kapitalpositionen entspricht, der auf hartes Kernkapital entfällt.
  </p>
  <p>7. If all of this may seem marvelous, but it's realistic! Imagine a combination of OWL and PHP. The capability to implement wirelessly leads to the ability to iterate virtually. We understand that it is better to e-enable intuitively than to morph intuitively.
    Without C2C, you will lack social networks. We will enlarge our ability to iterate virtually. The capability to implement wirelessly leads to the awards page of the pudding is in the industry, but our one-to-one, customer-defined, robust C2C2C M&A
    and user-proof use. The capability to implement wirelessly leads to the capacity to enable perfectly leads to the capacity to synthesize interactively. We believe we know that if you incentivize proactively then you may also mesh iteravely. Our feature
    set is unparalleled in the industry, but our non-complex administration and user-proof configuration is usually considered a remarkable achievement taking into account this month's financial state of things! If all of this may seem incredible to you,
    that's because it is! What does it really mean to optimize 'vertically'? Without robust, web-enabled, 60/60/24/7/365 implementation supervising, you will lack architectures. We will revalue our aptitude to incubate without reducing our capability
    to upgrade. Without development, you will lack experiences. Imagine a combination of Perl and FOAF.
  </p>
  <p>8. Kurz.</p>
</main>

null


共1个答案

匿名用户

h1的100%宽度,width:calc(100%...减去#1图像的宽度,以及其他一些关于Flex-Growt/Shrink的细节,请按您的描述执行(参见fiddle)

https://jsfiddle.net/j8sy19wb/

null

main {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  background-color: aliceblue;
}
main>* {
  margin: 0 1em 1em 0;
  background-color: lightgoldenrodyellow;
  align-items: flex-end;
}
figcaption {
  text-align: center;
}
main>figure:first-of-type {
  flex-grow: 0;
}
h1 {
  width: 100%;
}
main>*:nth-child(3) {
  width: calc(100% - 300px);
}
<main>
  <h1>Eine Seite, um den Flow zu flowen</h1>
  <figure>
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fgw3IWyGkC0rsazTi%2F200.gif&f=1&nofb=1">
    <figcaption>1. Das ist 2018 herum.</figcaption>
  </figure>
  <p>2. The President shall have at Least one Representative. In all the other Cases before mentioned, the supreme Court shall have been elected, and he shall have at Least one Representative. Note: Changed by the Eleventh Amendment. To borrow money on the
    credit of the States, and will to the best of my Ability, preserve, protect and defend the Constitution of the United States, reserving to the other House, by which it shall not be suspended, unless when in Cases of Rebellion or Invasion the public
    Safety may require the Opinion in writing, of the Persons voting for and against the United States shall guarantee to every State in which he was elected, be appointed to any Office or public Trust under the Authority of the State where the said Crimes
    shall have the Qualifications requisite for Electors of the most numerous Branch of the land and naval Forces.
  </p>
  <p>3. Kurz.</p>
  <ul>
    <li>4. List</li>
    <li>List</li>
    <li>List</li>
  </ul>
  <figure>
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fgw3IWyGkC0rsazTi%2F200.gif&f=1&nofb=1">
    <figcaption>5. Das ist so 2018 herum.</figcaption>
  </figure>
  <p>6. Als Kreditengagement gelten in diesem Zusammenhang sind die Begriffe „illiquide Sicherheiten“ und „ausserbörsliches Derivat, das nicht ohne Weiteres ersetzt werden kann, gilt für den überwiegenden Teil ihrer Geschäftsaktivitäten über eine IMMZulassung
    verfügen, aber für sich allein nicht aus. Diese Einheit muss die Integrität der zur Durchführung von Nachschussforderungen verwendeten Daten prüfen und sicherstellen, dass sie ihre Anforderungen für das antizyklische Kapitalpolster als den gewichteten
    Durchschnitt der Anforderungen in den Ländern, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die CVARisikokapitalanforderung gegen die CVA aufgerechnet werden. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang
    mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals in voller Höhe abgezogen werden. Ebenso ergibt sich der Betrag, der in Bezug auf Bedienungsrechte von Hypotheken abzuziehen ist, als die Summe sämtlicher Beteiligungspositionen,
    die insgesamt mehr als 10% des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Dementsprechend ergibt sich der Wert der des Aktivums mindern sollte oder falls sie nach einschlägigen Rechnungslegungsstandards auszubuchen wäre.
    Übersteigt die Summe sämtlicher Positionen, die insgesamt mehr als 10% des harten Kernkapitals der Bank (wie oben beschrieben) ausmachen, multipliziert mit dem Risikogewicht versehen werden, das sie als unmittelbares Eigentum der Bank (wie oben beschrieben)
    ausmachen, multipliziert mit dem prozentualen Anteil der gesamten Kapitalpositionen entspricht, der auf hartes Kernkapital entfällt.
  </p>
  <p>7. If all of this may seem marvelous, but it's realistic! Imagine a combination of OWL and PHP. The capability to implement wirelessly leads to the ability to iterate virtually. We understand that it is better to e-enable intuitively than to morph intuitively.
    Without C2C, you will lack social networks. We will enlarge our ability to iterate virtually. The capability to implement wirelessly leads to the awards page of the pudding is in the industry, but our one-to-one, customer-defined, robust C2C2C M&A
    and user-proof use. The capability to implement wirelessly leads to the capacity to enable perfectly leads to the capacity to synthesize interactively. We believe we know that if you incentivize proactively then you may also mesh iteravely. Our feature
    set is unparalleled in the industry, but our non-complex administration and user-proof configuration is usually considered a remarkable achievement taking into account this month's financial state of things! If all of this may seem incredible to you,
    that's because it is! What does it really mean to optimize 'vertically'? Without robust, web-enabled, 60/60/24/7/365 implementation supervising, you will lack architectures. We will revalue our aptitude to incubate without reducing our capability
    to upgrade. Without development, you will lack experiences. Imagine a combination of Perl and FOAF.
  </p>
</main>