난 이것이 최고 간단하지만 내가 대시보드를 만들에서는 파이썬의 돌진합니다. 나도 전에는 경험에 대 html. 나는 관리를 만들 div 상자 레이아웃에서 내가 원하는 경우 추가서 머리글 중 하나를 div,그것은 완전히 파괴 나의 레이아웃(참조 부착된 스크린 샷). 기에서 동시에 사용할 수 있습을 이해하는 데 도움이 어디서 나가 잘못된 것입니까?
import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State
app = dash.Dash()
app.layout = html.Div(
[
html.H1(
children="ML Dashboard",
className="main_title",
style={
"color": "black",
"text-align": "center"
},
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#096484",
"height": "5vh",
"width": "20vw",
"margin-left": "9vw",
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "39vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "3vh"
}
),
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "1.5vh"
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
],
style={
"background-color": "#52ACCC",
"height": "95vh",
"width": "95vw",
"margin-left": "2vw"
}
)
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=8080, debug=True)
import dash
from dash import dcc
from dash import html
import pandas as pd
from dash.dependencies import Input, Output, State
app = dash.Dash()
app.layout = html.Div(
[
html.H1(
children="ML Dashboard",
className="main_title",
style={
"color": "black",
"text-align": "center"
},
),
html.Div(
[
html.Div(
[
html.H1(
children="PIPELINE",
className="title_1",
style={
"color": "white",
"text-align": "center"
},
),
],
style={
"background-color": "#096484",
"height": "5vh",
"width": "20vw",
"margin-left": "9vw",
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "39vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
html.Div(
[
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "3vh"
}
),
html.Div(
[
],
style={
"background-color": "#4796B3",
"height": "40vh",
"width": "24vw",
"margin-left": "1vw",
"margin-top": "1.5vh"
}
),
],
style={
"background-color": "#74B6CE",
"height": "88vh",
"width": "26vw",
"margin-left": "1vw",
"display": "inline-block"
}
),
],
style={
"background-color": "#52ACCC",
"height": "95vh",
"width": "95vw",
"margin-left": "2vw"
}
)
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=8080, debug=True)