CodePudding
Home
front end
Back-end
Net
Software design
Enterprise
Blockchain
Mobile
Software engineering
database
OS
other
Home
>
front end
> Wonderful work, exotic solution
Wonderful work, exotic solution
Time：10-13
<meta charset="UTF-8">
Profile & lt;/title> <br/><br/><style> <br/>* {<br/>Margin: 0; <br/>padding:0; <br/>} <br/># a {<br/>width:100%; <br/>Height: 620 px; <br/>The box - sizing: border - box; <br/>Border: solid # FFEC8B 10 px; <br/><br/>} <br/># {b <br/>Width: 1323 px; <br/>Height: 580 px; <br/>margin-top: 10px; <br/>Margin - left: 10 px; <br/>The box - sizing: border - box; <br/>Border: solid # FF7F24 10 px; <br/><br/>} <br/>C # {<br/>Width: 1283 px; <br/>Height: 540 px; <br/>margin-top: 10px; <br/>Margin - left: 10 px; <br/>The box - sizing: border - box; <br/>Border: solid RGB (0, 162, 232) 10 px; <br/><br/>} <br/># d {<br/>Width: 1243 px; <br/>Height: 500 px; <br/>margin-top: 10px; <br/>Margin - left: 10 px; <br/>The box - sizing: border - box; <br/>Border: solid RGB (63, 72, 204) 10 px; <br/><br/>} <br/># e {<br/>Width: 1203 px; <br/>Height: 460 px; <br/>margin-top: 10px; <br/>Margin - left: 10 px; <br/>The box - sizing: border - box; <br/>Border: solid RGB (163, 73, 164) 10 px; <br/><br/>} <br/># f {<br/>Width: 1163 px; <br/>Height: 420 px; <br/>margin-top: 10px; <br/>Margin - left: 10 px; <br/>The box - sizing: border - box; <br/>Border: solid red 10 px; <br/><br/>} <br/># g {<br/>Width: 1123 px; <br/>Height: 380 px; <br/>margin-top: 10px; <br/>Margin - left: 10 px; <br/>The box - sizing: border - box; <br/>Border: solid red 10 px; <br/>The font - size: 0; <br/><br/>} <br/>The middle {<br/>font-size:12px; <br/>display:inline-block; <br/>Width: 367 px; <br/>Height: 360 px; <br/>Background - color: black. <br/><br/>} <br/>The left {<br/>font-size:12px; <br/>display:inline-block; <br/>Width: 367 px; <br/>Height: 360 px; <br/>Background - color: green. <br/><br/>} <br/>Right {<br/>font-size:12px; <br/>display:inline-block; <br/>Width: 367 px; <br/>Height: 360 px; <br/>Background - color: green. <br/>} <br/>The left div {<br/><br/>width:100%; <br/>Height: 25%; <br/>Background - color: yellow; <br/>} <br/></style> <br/><body> <br/><Div id="a" & gt; <br/><Div id="b" & gt; <br/><Div id="c" & gt; <br/><Div id="d" & gt; <br/><Div id="e" & gt; <br/><Div id="f" & gt; <br/><Div id="g" & gt; <br/><Div & gt; <br/><div> Economic & lt;/div> <br/><div> </div> <br/><div> </div> <br/><div> </div> <br/></div> <br/><Div & gt; </div> <br/><Div & gt; </div> <br/></div> <br/></div> <br/></div> <br/></div> <br/></div> <br/></div> <br/></div> <br/></body> <br/></html> <br/>Thief a strange question, in the class to the left of the div div to don't write the text layout normal, written text layout is messy, add attributes to left div overflow: hidden just normal layout,<p class="article - content rp"> CodePudding user response: </p>The left set is the display: inline - block; <br/>The inline - block also belong to the inline elements, <br/>Is an inline element will follow the vertical alignment of vertical - align <br/>Vertical - align the default value is the baseline: box of baseline and the parent box in the current baseline alignment, if there is no baseline, the box will bottom out away from the boundary and the parent of the baseline alignment <br/>Div not write a word, there is no baseline, will bottom out away from the boundary and the parent of the baseline alignment <br/>If written text is have a baseline, would be text box baseline aligned with the baseline parent box <br/><br/>You turn. Left is set to vertical - align: top; Let the box at the top of the current and parent box at the top of the alignment, <br/> </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link：<a href="/frontend/64946.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/64946.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/frontend/64945.html'>How to set up a q&a sites like zhihu?</a></div> <div class="detail-arr-right">Next:<a href='/frontend/64947.html'>Has not yet graduated from senior internship white Web front-end development old driver to lead the</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags： </li> <a href='/e/tags/?tagname=HTML+%28CSS%29' target='_blank'>HTML (CSS)</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links： </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>
