| OLD | NEW |
|---|
| (Empty) |
| 1 <!doctype html> | |
| 2 | |
| 3 <style> | |
| 4 .test_paragraph { | |
| 5 margin-top: 1em; | |
| 6 margin-bottom: 1em; | |
| 7 text-align: justify; | |
| 8 font-size: 10px; | |
| 9 font-family: Ahem; | |
| 10 -webkit-font-smoothing: none; | |
| 11 } | |
| 12 | |
| 13 #top_paragraph { | |
| 14 margin-top: 1em; | |
| 15 margin-bottom: 1em; | |
| 16 } | |
| 17 | |
| 18 #region1 { | |
| 19 border: 1px solid black; | |
| 20 width: 390px; | |
| 21 height: 90px; | |
| 22 padding: 5px; | |
| 23 } | |
| 24 | |
| 25 #first-box1 { | |
| 26 border: 1px solid blue; | |
| 27 border-bottom: none; | |
| 28 } | |
| 29 | |
| 30 #second-box1 { | |
| 31 margin:10px; | |
| 32 border: 1px solid green; | |
| 33 border-bottom: none; | |
| 34 width: 366px; | |
| 35 height: 83px; | |
| 36 } | |
| 37 | |
| 38 #region2 { | |
| 39 border: 1px solid black; | |
| 40 width: 290px; | |
| 41 height: 110px; | |
| 42 padding: 5px; | |
| 43 } | |
| 44 | |
| 45 #first-box2 { | |
| 46 border: 1px solid blue; | |
| 47 border-top: none; | |
| 48 border-bottom: none; | |
| 49 } | |
| 50 | |
| 51 #second-box2 { | |
| 52 margin-left:10px; | |
| 53 margin-top: -5px; | |
| 54 padding: 0px; | |
| 55 border: 1px solid green; | |
| 56 border-top: none; | |
| 57 border-bottom: none; | |
| 58 width: 266px; | |
| 59 height: 120px; | |
| 60 } | |
| 61 | |
| 62 #first-paragraph3 { | |
| 63 margin-top: 0px; | |
| 64 } | |
| 65 | |
| 66 #region3 { | |
| 67 border: 1px solid black; | |
| 68 width: 390px; | |
| 69 height: 290px; | |
| 70 padding: 5px; | |
| 71 } | |
| 72 | |
| 73 #first-box3 { | |
| 74 border: 1px solid blue; | |
| 75 border-top: none; | |
| 76 } | |
| 77 | |
| 78 #second-box3 { | |
| 79 margin:10px; | |
| 80 margin-top: -5px; | |
| 81 border: 1px solid green; | |
| 82 border-top: none; | |
| 83 width: 366px; | |
| 84 } | |
| 85 | |
| 86 #imgFloat1 { | |
| 87 float: left; | |
| 88 background-color:green; | |
| 89 width: 130px; | |
| 90 height: 110px; | |
| 91 } | |
| 92 | |
| 93 #imgFloat2 { | |
| 94 float: right; | |
| 95 background-color:yellow; | |
| 96 width: 130px; | |
| 97 height: 130px; | |
| 98 } | |
| 99 </style> | |
| 100 | |
| 101 <div id="top_paragraph">In the example below, the first float pushes content int
o region #2, and the second float pushes both floats into region #3.</div> | |
| 102 | |
| 103 <div id="content"> | |
| 104 <div id="region1"> | |
| 105 <div id="first-box1"> | |
| 106 <div id="second-box1"></div> | |
| 107 </div> | |
| 108 </div> | |
| 109 | |
| 110 <div id="region2"> | |
| 111 <div id="first-box2"> | |
| 112 <div id="second-box2"></div> | |
| 113 </div> | |
| 114 </div> | |
| 115 | |
| 116 <div id="region3"> | |
| 117 <div id="first-box3"> | |
| 118 <div id="second-box3"> | |
| 119 <div class="test_paragraph" id="first-paragraph3">This <img id="
imgFloat1"><img id="imgFloat2">line of text should not get out of the region. Th
is line of text should not get out of the region. This line of text should not g
et out of the region. This line of text should not get out of the region.</div> | |
| 120 <div class="test_paragraph" id="second-paragraph3">This line of
text should not get out of the region. This line of text should not get out of t
he region. This line of text should not get out of the region. This line of text
should not get out of the region.</div> | |
| 121 <div class="test_paragraph">This line of text should not get out
of the region.</div> | |
| 122 </div> | |
| 123 </div> | |
| 124 </div> | |
| 125 </div> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 159863002:
Remove CSS regions support, keeping a bare minimum to support "region-based" multicol. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master