75 lines
2.4 KiB
HTML
75 lines
2.4 KiB
HTML
<style>
|
|
div.test {
|
|
-webkit-logical-width: 100px;
|
|
-webkit-border-before: 5px solid;
|
|
-webkit-border-after: 15px solid;
|
|
-webkit-column-count: 2;
|
|
-webkit-column-gap: 0;
|
|
-webkit-column-fill: auto;
|
|
column-count: 2;
|
|
column-gap: 0;
|
|
column-fill: auto;
|
|
background-color: lightblue;
|
|
}
|
|
div.container {
|
|
-webkit-logical-height: 120px;
|
|
background-color: red;
|
|
-webkit-logical-width: 100px;
|
|
-webkit-margin-after: 8px;
|
|
}
|
|
</style>
|
|
<div>
|
|
<div class="container">
|
|
<div class="test" style="-webkit-logical-height: 100px;">
|
|
<div style="-webkit-logical-height: 20px;">
|
|
<div style="-webkit-logical-height: 300px; background-color: yellow;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="test">
|
|
<div style="-webkit-logical-height: 20px;">
|
|
<div style="-webkit-logical-height: 200px; background-color: yellow;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="test">
|
|
<div style="-webkit-logical-height: 10px;"></div>
|
|
<div style="-webkit-column-break-before: always; -webkit-logical-height: 10px;">
|
|
<div style="-webkit-logical-height: 100px; background-color: yellow;"></div>
|
|
</div>
|
|
<div style="-webkit-logical-height: 20px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="-webkit-writing-mode: vertical-rl;">
|
|
<div class="container">
|
|
<div class="test" style="-webkit-logical-height: 100px;">
|
|
<div style="-webkit-logical-height: 20px;">
|
|
<div style="-webkit-logical-height: 300px; background-color: yellow;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="test">
|
|
<div style="-webkit-logical-height: 20px;">
|
|
<div style="-webkit-logical-height: 200px; background-color: yellow;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="test">
|
|
<div style="-webkit-logical-height: 10px;"></div>
|
|
<div style="-webkit-column-break-before: always; -webkit-logical-height: 10px;">
|
|
<div style="-webkit-logical-height: 100px; background-color: yellow;"></div>
|
|
</div>
|
|
<div style="-webkit-logical-height: 20px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|