1
Ich habe versucht, etwas wie dieses Beispiel Mozilla Comic-Strip Tutorial neu erstellen, aber meine Boxen würde mit verschiedenen vertikalen Ausrichtungen enden.wie Abschnitte vertikal mit Anzeige als Inline-Block ausrichten
Ich schaute mich hier um und stieß auf diese question und die Lösung funktionierte gut für mich. Ich bin gespannt, was der Unterschied zwischen meinem Fall und dem Beispiel von Mozilla ist.
Außerdem wäre es schön zu wissen, warum die beiden "infoSubPanel" -Divs nicht vertikal ausgerichtet sind.
Vielen Dank im Voraus.
P.S. Ich schaute auch auf this, aber der erste Trick half mir.
P.P.S. Für einen Teil dieses Beispiels habe ich auch diese other question untersucht.
ich meinen Code unten eingefügt haben:
<!DOCTYPE html>
<html>
<head>
<title>v0.01 Multi Section Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #efefef;
font-family: sans-serif;
text-align: left;
padding: 20px 0 0 20px;
}
.mainScr {
max-width: 1500px;
margin: 1px;
}
.mainInfo {
background-color: #D4FCD5;
min-width: 495px;
max-width: 1470px;
min-height: 100px;
border: 1px double green;
}
.screenParts {
vertical-align: top;
width: 49%;
max-width: 730px;
min-width: 495px;
min-height: 450px;
border: 1px solid white;
background: #F7E7C4;
margin: 1px;
display: inline-block;
}
.graphicsPanel {
width: 100%;
height: 66%;
border: 1px solid blue;
background: lightblue;
}
.dataPlots {
width: 100%;
height: 33%;
border: 1px solid brown;
background: beige;
}
.infoSubPanel {
min-height:450px;
width:48%;
min-width: 250;
display:inline-flex;
border: 1px solid brown;
}
.scrollabletextbox {
width: 100%;
height: 100%;
min-height: 500px;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 100%;
overflow:scroll;
resize: none;
text-align: left;
}
</style>
</head>
<body>
<div class="mainInfo">
<h1>Very important data goes here...</h1>
</div>
<div class="mainScr">
<div id="visual" class="screenParts">
<div class="graphicsPanel">
<h1>Some Graphics Goes Here</h1>
<h1>Some Graphics Goes Here</h1>
<h1>Some Graphics Goes Here</h1>
<h1>Some Graphics Goes Here</h1>
<h1>Some Graphics Goes Here</h1>
</div>
<div class="dataPlots">
<div style="display: block;">
<p> charts and plots go here</p>
<p> charts and plots go here</p>
<p> charts and plots go here</p>
<p> charts and plots go here</p>
<p> charts and plots go here</p>
</div>
</div>
</div>
<div id="detail" class="screenParts">
<div class="infoSubPanel">
<div style="display: block;">
<p>Some info and date-time will go here...</p>
<p>Some info and date-time will go here...</p>
<p>Some info and date-time will go here...</p>
<p>Some info and date-time will go here...</p>
<p>Some info and date-time will go here....</p>
<p>Some info and date-time will go here...</p>
</div>
</div>
<div class="infoSubPanel">
<textarea class="scrollabletextbox" name="logs">
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
</textarea>
</div>
</div>
</div>
</body>
</html>
Danke, ich bevorzuge nicht float zu verwenden und es zu vermeiden, weil ich immer noch nicht weiß, wie es genau funktioniert und manchmal wirft es meine divs aus ihren Eltern divs. –