我正在通過編碼學習 React，這里我有兩個不同的影像，在它們下面應該是具有 20px 高度和棕色背景顏色的 div，如您所見，我已經放置了 height :"100%" 和 justifyContent:"space-between"所以現在我應該能夠在影像下看到那個 div，為什么它沒有顯示？
在這里試試： https ://codesandbox.io/s/amazing-http-6bdt88?file=/src/App.js
代碼：
import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";
export default function App() {
return (
<div className="App">
<div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
<div style={{ display: "flex", height: "100%", background: "darkblue" }}>
<div
style={{
border: "1px solid orange",
width: "100px",
height: "100%",
background: "gray"
}}
>
side content
</div>
<div style={{ width: "100%", height: "100%" }}>
<div
style={{
width: "100%",
height: "100%",
background: "red",
border: "3px solid yellow"
}}
>
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "100%",
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "100%",
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
</Allotment>
</div>{" "}
</div>
</div>
</div>
);
}uj5u.com熱心網友回復：
嗨，所以我做了一些更正，在此處查找 ***********
嘗試使用容器的大小。記住底部
和權利永遠繼續下去。所以我你使用 100% 的高度并且沒有底部
import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";
export default function App() {
return (
<div className="App">
<div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
<div style={{ display: "flex", height: "100%", background: "darkblue" }}>
<div
style={{
border: "1px solid orange",
width: "100px",
height: "100%",
background: "gray"
}}
>
side content
</div>
<div style={{ width: "100%", height: "100%" }}>
<div
style={{
width: "100%",
height: "100vh",// ***********HERE
background: "red",
border: "3px solid yellow"
}}
>
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "50vh", // ************HERE
flexDirection: "column",
justifyContent: "space-between",
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "50vh", // *********************HERE
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
</Allotment>
</div>{" "}
</div>
</div>
</div>
);
}
uj5u.com熱心網友回復：
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/><div style={{ height: "20px", background: "brown" }}></div>
嘗試這個？希望能幫助到你
uj5u.com熱心網友回復：
問題出在<Allotment.Pane>標簽內部。
在里面的第二個<div>元素中，<Allotment.Pane>將樣式更改height: "100%"為height: "auto"
您看不到棕色 div 元素，因為您的影像父 div 元素正在使用高度為 100% 的整個列。所以下面的 HTML 元素已被推出。
如果您添加border: '1px solid white'到影像父容器中，您將明白我的意思。
嘗試這個
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "85%",
flexDirection: "column",
justifyContent: "space-between",
border: "1px solid white"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
</div>
<div
style={{
height: "15%",
background: "brown",
border: "1px solid white"
}}
></div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "85%",
flexDirection: "column",
justifyContent: "space-between",
border: "1px solid white"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
</div>
<div style={{ height: "15%", background: "brown" }}></div>
</Allotment.Pane>
</Allotment>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448391.html
標籤：javascript html css 反应 材料-ui