<span style="color: #000000;"> .left{ width: 300px; height: 500px; border: 1px solid; </span><span style="color: #0000ff;">float</span><span style="color: #000000;">: left; } .right{ width: 10000px; height: 500px; display: table</span>-<span style="color: #000000;">cell; border: 1px solid; } </span></style> <div class="left"></div> <div class="right"><span style="color: #000000;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore est et itaque nesciunt nobis officia omnis optio similique vitae. Cupiditate eum exercitationem harum id iusto maiores quaerat reprehenderit sint. </span></div>
效果如下:
(调整窗口大小,来测试右侧是否根据窗口大小改变)
<span style="color: #008080;"> 1</span> <style> <span style="color: #008080;"> 2</span> <span style="color: #000000;"> .right{ </span><span style="color: #008080;"> 3</span> <span style="color: #000000;"> width: 200px; </span><span style="color: #008080;"> 4</span> <span style="color: #000000;"> height: 500px; </span><span style="color: #008080;"> 5</span> <span style="color: #000000;"> border: 1px solid; </span><span style="color: #008080;"> 6</span> display: table-<span style="color: #000000;">cell; </span><span style="color: #008080;"> 7</span> <span style="color: #000000;"> } </span><span style="color: #008080;"> 8</span> <span style="color: #000000;"> .left{ </span><span style="color: #008080;"> 9</span> <span style="color: #000000;"> height: 500px; </span><span style="color: #008080;">10</span> <span style="color: #000000;"> border: 1px solid; </span><span style="color: #008080;">11</span> display: table-<span style="color: #000000;">cell; </span><span style="color: #008080;">12</span> <span style="color: #000000;"> } </span><span style="color: #008080;">13</span> <span style="color: #000000;"> .parent{ </span><span style="color: #008080;">14</span> <span style="color: #000000;"> display: table; </span><span style="color: #008080;">15</span> table-<span style="color: #000000;">layout: fixed; </span><span style="color: #008080;">16</span> width: 100%<span style="color: #000000;">; </span><span style="color: #008080;">17</span> <span style="color: #000000;"> } </span><span style="color: #008080;">18</span> </style> <span style="color: #008080;">19</span> <span style="color: #008080;">20</span> <div class="parent"> <span style="color: #008080;">21</span> <div class="left"> <span style="color: #008080;">22</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, assumenda dolores eaque, fugiat illo, <span style="color: #0000ff;">in</span><span style="color: #000000;"> inventore itaque magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, totam. </span><span style="color: #008080;">23</span> </div> <span style="color: #008080;">24</span> <div class="right"></div> <span style="color: #008080;">25</span> </div>
效果如下:
与左侧定宽稍有不同,虽然只是定宽的位置换了,但是不能直接使用浮动像左侧定宽那种方式完成。
<style><span style="color: #000000;"> .parent{ display: table; table</span>-<span style="color: #000000;">layout: fixed; width: </span>100%<span style="color: #000000;">; } div{ border: 1px solid; } .left,.right,.center{ display: table</span>-<span style="color: #000000;">cell; } .left{ width: 100px; height: 200px; } .right{ width: 100px; height: 200px; } </span></style> <div class="parent"> <div class="left"></div> <div class="center"><span style="color: #000000;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet delectus ducimus ea eos eum, libero modi quia, soluta temporibus unde, <br /> ut. Aliquam, dolorem ipsam porro quae quisquam saepe vitae</span>! </div> <div class="right"></div> </div>
效果如下:
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号