無法理解為什么 flexbox 容器中的這些元素沒有正確對齊

Question

我試圖均勻地組織這些元素，如圖片和文本框，與邊框的距離相等，但看起來里面有圖片的 div 占用了太多空間並且將文本框推到了右側。 我試過 flex-grow:1; 還有很多其他的想法，在我自己的 SVG 的另一部分中，它似乎工作正常，但由於某種原因在這里不行。 我知道我的代碼草率且業余，我仍在學習基礎知識。

 * { margin: 0; padding: 0; } body { background-color: #4a4e69; color: #f2e9e4; font-family: "Manrope", sans-serif; } main { padding: 5%; } section { height: 40rem; padding: 1%; padding-top: 5%; } .wrapper { display: flex; align-items: center; align-content: center; justify-content: center; margin: 0 auto; max-width: 80%; flex-wrap: wrap; flex-direction: column; } .textBox { margin: 0 auto; display: flex; flex-direction: column; text-align: center; row-gap: 50px; justify-content: center; align-items: center; max-width: 40%; height: fit-content; } .text { border: 1px solid white; margin: 5%; padding: 5%; text-align: center; text-indent: 1ch; } .image { border: 1px solid white; padding: 2%; max-width: 50%; } .sloganSmall { padding: 2%; text-align: center; display: block; position: relative; margin: 0 auto; } .shit { margin: 0 auto; max-width: fit-content; text-align: center; }

 <section id="intro" class="wrapper"> <h2 class="sloganSmall">Our mission</h2> <div class="shit"> <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" /> </div> <div class="textBox"> <p class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum. Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere fugiat officiis voluptates esse fuga suscipit soluta unde.</p> </div> </section>

Answer 1

您使編碼過於復雜。 對於您的 amrkup，我建議您使用 CSS-grid。 Justc 創建一個 2 列網格並讓標題跨越兩列：

 * { margin: 0; padding: 0; } body { background-color: #4a4e69; color: #f2e9e4; font-family: "Manrope", sans-serif; } .wrapper { max-width: 80%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; } .wrapper > h2 { grid-column: 1 / -1; text-align: center; } .wrapper > .shit { display: flex; align-items: center; } .wrapper > .shit > img { width: 100%; }

 <section id="intro" class="wrapper"> <h2 class="sloganSmall">Our mission</h2> <div class="shit"> <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" /> </div> <div class="textBox"> <p class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum. Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere fugiat officiis voluptates esse fuga suscipit soluta unde.</p> </div> </section>

Answer 2

另一種方式，您將需要調整...

 * { margin: 0; padding: 0; } body { background-color: #4a4e69; color: #f2e9e4; font-family: "Manrope", sans-serif; } main { padding: 5%; } section { height: 40rem; padding: 1%; padding-top: 5%; } .wrapper { display: inline-block; margin: 0 auto; max-width: 80%; } .textBox { margin: 0 auto; display: block; text-align: center; width: 50%; float: left; } .text { border: 1px solid white; margin: 5%; padding: 5%; text-align: center; text-indent: 1ch; } .image { border: 1px solid white; padding: 2%; max-width: 50%; } .sloganSmall { padding: 2%; text-align: center; display: block; position: relative; margin: 0 auto; } .shitblock { margin: 0 auto; float: left; width: 50%; display: block; } .shit { margin: 0 auto; text-align: center; }

 <section id="intro" class="wrapper"> <div class="shitblock"> <h2 class="sloganSmall">Our mission</h2> <div class="shit"> <img src="https://api.ndla.no/image-api/raw/skjermbilde_2019-04-16_kl._10.55.05.png?" alt="Luwak" class="image" /> </div> </div> <div class="textBox"> <p class="text"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ideos, delectus eligendi in nemo est, dicta a suscipit quo porro debitis eaque consequatur quisquam ratione deserunt iusto vitae sunt totam beatae! Eum veritatis culpa neque ipsam nostrum. Quisquam asperiores praesentium enim dolorem in aliquid blanditiis adipisci ipsa. Saepe, enim voluptates! Excepturi, dolore doloremque eveniet architecto aliquid nemo animi voluptatum veniam dolorum laudantium accusamus odio beatae odit, facere fugiat officiis voluptates esse fuga suscipit soluta unde.</p> </div> </section>